同位素和惰性加载有问题。似乎将同位素和每个具有固定高度和宽度的图像网格化,它覆盖了砌体布局。也许是 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 使砌体成为一个固定的网格,而不是看起来像这样,它应该是砌体并相应地适合。
最佳答案
您需要指定图像的 height
和 width
属性,以便即使未加载图像也能正确设置布局。
否则,您可以调用 reLayout
每次图像都会触发 load
事件,但这远非理想且性能昂贵。
关于javascript - 延迟加载和同位素砌体问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20523558/