有时图像不会在页面中正确加载Packery Masonry

Question

我在现场使用 Packery 自动调整图像： http://jsfiddle.net/tryjkvg3/

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

有时图片会这样显示：

正确的是：

但是，如果调整 window 的大小，图像会调整并保持良好状态。如何在 window

中强制图像显示每次正确而不调整大小

Answer 1

我找到了解决办法： Using masonry with imagesloaded

所以，我的最终代码：

$(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
    });    
  });
});

它的必要使用 imagesloaded

有时图像不会在页面中正确加载Packery Masonry

Sometimes images dont load right in page Packery Masonry

jquery

packery