javascript - 延迟加载和同位素砌体问题

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;
}

J查询:

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

延迟加载:

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

这是一个屏幕截图，您可以看到 lazyload 使砌体成为一个固定的网格，而不是看起来像这样，它应该是砌体并相应地适合。

Answer 1

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

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