Custom Fit Web Design

Masonry is a JavaScript grid layout library based on columns. It works by placing elements in optimal position based on available vertical space. It doesn’t have fixed height rows.

Popular social site – Pinterest was the first major website to use this layout style.
As of WordPress version 3.9, Masonry is actually built into the core of WordPress ( wp-includes/js/masonry.min.js ). This WordPress version of Masonry also includes ImagesLoaded (imagesloaded.min.js).

• When we fill a container with equally sized objects and float them left, we get a nice grid of images.
• If we are displaying multiple images and they are all different sizes, they appear scattered.

LAYOUT BEFORE APPLYING MASONRY:

LAYOUT AFTER APPLYING MASONRY:

Markup for our HTML elements

<div class="row" id="ms-container">
    <div class="grid-item">...</div>
    <div class="grid-item">...</div>
    <div class="grid-item">...</div>
</div>

We need to tell WordPress to pull Masonry out of the core install and actually use it. This is done by enqueuing it in the functions.php file of your theme.

function my_masonry() {
    wp_enqueue_script('masonry');
}
add_action('wp_enqueue_scripts', 'my_masonry');

function MasonOnLoad() { ?> 
    <script>
    (function( $ ) {
        "use strict";
        $(function() {
            // set the container that Masonry will be inside of in a var
            var container = document.querySelector( '#ms-container' );
            // create empty var msnry
            var msnry;
            // initialize Masonry after all images have loaded
            imagesLoaded( container, function() {
                msnry = new Masonry( container, {
                    itemSelector: '.grid-item'
                });
            });
        });
    }(jQuery));
    </script>
<?php } // end function MasonOnLoad
add_action('wp_footer', 'MasonOnLoad');

UPDATED 10/28/22

Another way to add masonry

NOTE: Masonry / imagesLoaded : prevent layout refresh from moving already loaded items

function MasonOnLoad() { ?> 
    <script>
    (function( $ ) {
        "use strict";
        $(function() {
            var $grid = $('#ms-container');

            // Initialize Masonry
            $grid.masonry({
                itemSelector: '.grid-item'
            });

            /* When new items are loaded (e.g., via AJAX), 
               attach them to the container and tell Masonry 
               to recalculate their positions.
            */
            $grid.append(html).each(function(){
                $grid.masonry('reloadItems');
            });

            // Ensure layout triggers after images are fully loaded
            $grid.imagesLoaded(function(){
                $grid.masonry();
            });
        });
    }(jQuery));
    </script>
<?php } // end function MasonOnLoad

add_action('wp_footer', 'MasonOnLoad');

As long as we have a width set on our container div, the code above performs the magic we need it to and reflows the elements. If you set the div width to a percent, Masonry automatically reflows the items as the page resizes and maintains their aspect ratio.