Lazyload和同位素砌体问题

Question

有同位素和懒惰的问题。似乎网格同位素和每个图像具有固定的高度和宽度，它覆盖了砖石布局。也许是一个CSS问题，但对于发生的事情非常困惑。这是我的细分和截图：

HTML / PHP（我已经缩短了这是代码的主要元素）：

<div class="isotope">
<img class="lazy" data-original="<?= htmlspecialchars($row['url']) ?>" />
</div>

我的css：

.isotope-item {
  z-index: 2;
}
.isotope img {
    margin:0 8px 8px 0;
    width:202px;
}
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

Jquery的：

  $(window).load(function(){
    var $container = $('.isotope');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });

延迟加载：

$(".lazy").lazyload();

这是一个截图，所以你可以看到lazyload使砌体成为一个固定的网格，而不是看起来像这样，它应该是砖石和相应的适合。

Answer 1

您需要指定图片height和width属性，以便即使未加载图片也能正确设置布局。

否则，每次图像触发load事件时，您都可以调用reLayout，但这远非理想且性能昂贵。