Masonry layout are stack up on random page loads

[ghost]

Hi

I want my masonry layout to have lazy loading and it's working fine but sometimes, on random page loads, the layouts get stack together.

isotope:

// initialize Isotope
var $container = $('#container').isotope({
  // options
  itemSelector: '.item',
  masonry: {
    columnWidth: '.grid-sizer',
    gutter: '.gutter-sizer'
  }
});
// layout Isotope again after all images have loaded
$container.imagesLoaded( function() {
  $container.isotope('layout');
});

unveil:

  $(document).ready(function() {
    $("img").unveil(50, function() {
      $(this).load(function() {
        this.style.opacity = 1;
      });
    });
  });

[cfxd]

Why re-layout Isotope using imagesLoaded()? You should just use it from the beginning.

For your initialization that would mean using this initialization:

var $container = $('#container').imagesLoaded( function() {
  $container.isotope({
    itemSelector: '.item',
    masonry: {
      columnWidth: '.grid-sizer',
      gutter: '.gutter-sizer'
    }
  });
});

If that doesn't work then check your console for errors. Also be sure that you're including imagesLoaded because last time I checked it does not come with Isotope by default.