Dealing with images has always been troublesome for Masonry. To calculate the appropriate amount of space, Masonry's layout algorithm needs the size of each item element. If an image isn't loaded, that space does not get appropriately measured, and causes the layout to be thrown off.

There are several methods to resolve this issue, but the ideal solution would be a plugin that would trigger a callback after all images within some content are loaded. Fortunately, Paul Irish has already done most of the work in his imagesLoaded plugin.

I've subsequently forked the imagesLoaded plugin for use with Masonry and Isotope.

Now Masonry users no longer have to rely on $(window).load() to load every image on the page before the plugin is triggered.

imagesLoaded and Masonry fiddle

Additionally, you can use imagesLoaded inside the Infinite Scroll callback.

// call masonry as a callback
function( newElements ) {
  var $elems = $(newElements);

  $elems.imagesLoaded( function(){
    $('#container').masonry({ appendedContent: $elems })
  })
}