延迟加载和同位素砌体问题答案

【问题标题】：Lazyload and isotope masonry issue延迟加载和同位素砌体问题
【发布时间】：2013-12-12 01:29:49
【问题描述】：

同位素和延迟加载有问题。似乎将同位素和具有固定高度和宽度的每个图像网格化，它覆盖了砖石布局。也许是一个 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 使砌体成为固定网格，而不是看起来像这样，它应该是砌体并相应地适合。

【问题讨论】：

标签： javascript jquery html css jquery-isotope

【解决方案1】：

您需要指定图片height 和width 属性，这样即使图片没有加载，布局也会正确设置。

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

【讨论】：

指定高度和宽度虽然会使宽度大于高度的图像感到不安。使用 CSS，我可以简单地指定宽度：它会自动定义高度，允许我进行砌体。但是，当指定高度时，它会消除我不想要的图像..
您需要设置每个图像的真实宽度/高度，然后使用 CSS 将它们缩放到最终尺寸。如果没有宽度/高度，浏览器在图像完全加载之前不知道元素的大小。所以使用lazyload会破坏Isotope，因为它无法确定图像加载后的大小。
感谢您抽出宝贵时间。我已经能够定义图像的宽度和高度，但是在 CSS 中设置宽度时，我仍然会得到心烦意乱的图像。有什么建议么？再次感谢伙计。
当您在img 上设置width: 100% 时，您需要添加height: auto;。