Question

与许多用户一样，我在使用同位素时遇到了常见的重叠问题。我尝试集成imagesLoaded并且它在某种程度上起作用，但是因为我想要显示100多张照片 - 在布置同位素之前等待所有照片加载是没有效率的。在同位素激发之前，所有100个图像都加载到一列中。我试图将LazyLoad添加到等式中，但无济于事。经过无休止的研究和阅读后，我得出的结论是，在我遇到这个网站之前，我想要实现的目标是不可能的：

http://www.erikjohanssonphoto.com/

这正是我一直在努力实现的目标。正如您所看到的，无论首先加载哪个图像，所有图像都会加载到正确的位置。加载图像后没有重新布局，但是当您向下滚动时会显示更多图像。最重要的是，设置是响应式的。在调整窗口大小时，网格项会相应地缩放，并且每个设置增量的列数也会发生变化。

任何有助于实现这一目标的帮助或建议都将受到高度赞赏！

HTML

<body>

<div id="container" class="fluid">
<div class="item">
    <img src="images/1.jpg" data-original="images/1.jpg"></div>
<div class="item">
    <img src="images/2.jpg" data-original="images/2.jpg"></div>
<div class="item">
    <img src="images/3.jpg" data-original="images/3.jpg"></div>
<div class="item">
    <img src="images/4.jpg" data-original="images/4.jpg"></div>
<div class="item">
    <img src="images/5.jpg" data-original="images/5.jpg"></div>
<div class="item">
    <img src="images/6.jpg" data-original="images/6.jpg"></div>
<div></div>

</body>

CSS

.container, .header {
margin: auto;
text-align: center;}

#container.fluid .item {
width:  25%; }

#container.fluid .item img {
display: block;
width: 100%;}

JS

$(window).load(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
$container.isotope({
    itemSelector: '.item',   
});

$('.item img').addClass('not-loaded');
$('.item img.not-loaded').lazyload({
    effect: 'fadeIn',
    load: function() {
        // Disable trigger on this image
        $(this).removeClass("not-loaded");
        $container.isotope('reload');
    }
});
$('.item img.not-loaded').trigger('scroll');
});
});

响应同位素（Masonry）+ imagesLoaded + LazyLoad

0 个答案: