惰性荷载和同位素砌块问题

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，但这并不理想，而且性能代价高昂。