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

时间:2015-07-30 12:02:31

标签: jquery packery

我在网站上使用Packery自动调整图像: http://jsfiddle.net/tryjkvg3/

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

有时图像会以这种方式显示: enter image description here

正确的是: enter image description here

但是,如果调整窗口大小,图像必须保持正常。 如果没有在窗口中调整大小,每次正确显示力图像

1 个答案:

答案 0 :(得分:0)

我找到了解决方案: 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