Sometimes images dont load right in page Packery Masonry

Question

I'm used Packery for auto ajust images on site: http://jsfiddle.net/tryjkvg3/

var container = document.querySelector('#container');
var pckry = new Packery(container, {
    // options
    itemSelector: '.lista-isotope',
    gutter: 0
});

sometimes the images show this way:

the correct is:

But, if resize the window, images ajust and stay fine. How force images show every time correct without do a resize in the window

score 0 · Accepted Answer · edited May 23 '17 at 11:51

I find the solution: Using masonry with imagesloaded

so, my final code:

$(document).ready(function() {

  var $boxes = $('.lista-isotope');
  $boxes.hide();

  var $container = $('#container');
  $container.imagesLoaded( function() {
    $boxes.fadeIn();

    $container.masonry({
        itemSelector : '.lista-isotope',
        gutter: 0,
        isAnimated: !Modernizr.csstransitions
    });    
  });
});

its necessary use imagesloaded

Sometimes images dont load right in page Packery Masonry

1 Answers1