Javascript 懒散负荷与同位素砌体问题

有同位素和懒散负荷的问题。似乎网格化了同位素和每个具有固定高度和宽度的图像，它覆盖了砖石布局。可能是CSS的问题，但对于正在发生的事情非常困惑。这是我的分类和截图：

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

Jquery：

延迟加载：

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

---

您需要指定图像的

高度

和

宽度

属性，这样即使未加载图像，布局也能正确设置

---

否则，您可以在每次图像触发

load

事件时调用，但这远远不够理想，而且性能昂贵。

指定高度和宽度会破坏宽度大于高度的图像。使用CSS，我可以简单地指定宽度：它将自动定义高度，允许我进行砌筑。但是，当指定高度时，它与我不想要的图像成平方。您需要设置每个图像的实际宽度/高度，然后使用CSS将它们缩放到最终大小。如果没有宽度/高度，则在图像完全加载之前，浏览器不知道元素的大小。所以使用lazyload，因为它无法确定图像一旦加载后的大小。感谢您花时间。我已经能够定义图像的宽度和高度，但是当在CSS中设置宽度时，我仍然得到令人心烦意乱的图像。有什么建议吗？再次感谢你，伙计。你需要添加

height:autoimg

上设置

width:100%

时，code>。

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

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

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

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