Multiple masonry layouts on one page

[kitsguru]

I have multiple layouts on one page which works most of the time but occasionally when many images are loading, one or more of the layouts can overlap. I have been and am still using data-masonry on each layout.

Using imagesloaded does solve the problem but I was wondering if I am approaching the solution with the optimal solution. I am using the following bit of javascript.

$('#body').imagesLoaded( function() {
        // init Masonry after all images have loaded
        $('.grid, .grid-footer, .grid-hp').masonry({
            // options...
        });
    });

Is this the optimal approach?

[desandro]

Thank you for reporting this issue.

I recommend triggering imagesLoaded individually for each Masonry container. So when a container's images are loaded, then its Masonry layout can be triggered (as opposed to waiting for all containers images to be loaded collectively). Here's one what to do that:

initMasonry( $('.grid') );
initMasonry( $('.grid-footer') );
initMasonry( $('.grid-hp') );

function initMasonry( $grid ) {
  var $grid = $grid.masonry({
    // options
  });

  // layout images after they are loaded
  $grid.imagesLoaded( function() {
    $grid.masonry('layout');
  });
}