1

与许多用户一样，我在使用同位素时遇到了常见的重叠问题。我尝试集成 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');
});
});
4

0 回答 0