Javascript 响应同位素（砌体）和#x2B；图像标记+；懒汉_Javascript_Jquery_Jquery Isotope_Imagesloaded_Lazy Loading

Javascript 响应同位素（砌体）和#x2B；图像标记+；懒汉

javascript jquery

Javascript 响应同位素（砌体）和#x2B；图像标记+；懒汉,javascript,jquery,jquery-isotope,imagesloaded,lazy-loading,Javascript,Jquery,Jquery Isotope,Imagesloaded,Lazy Loading,与许多用户一样，我在使用同位素时遇到了常见的重叠问题。我尝试集成imagesLoaded，它在某种程度上起了作用，但因为我想显示100多张照片——在布局之前等待所有照片加载是没有效率的。加上所有100张图像在同位素发射前加载到一列中。我也试着在等式中加上懒汉，但没有用。经过无休止的研究和阅读，我得出的结论是，我想要实现的是不可能的，直到我发现了这个网站：这正是我一直在努力实现的目标。正如您所看到的，无论先加载哪个图像，所有图像都会加载到正确的位置。图像加载后不会重新播放，但当您向下滚动显示更

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

这正是我一直在努力实现的目标。正如您所看到的，无论先加载哪个图像，所有图像都会加载到正确的位置。图像加载后不会重新播放，但当您向下滚动显示更多图像时，它是渐进的。最重要的是，设置是响应的。网格项会随着窗口大小的调整而相应缩放，列数也会随着每次设置的增量而变化

任何帮助或建议，在实现这一点将不胜感激

HTML

它似乎是由它制造的。他们还可以免费试用建立一个网站。一个人可以使用同位素，懒汉和图片，顺便说一句。谢谢！你说得对，它是用平方空间制作的，但我不想用平方空间。你知道如何使用同位素懒散负荷和图像复制这些结果吗？这里有一些演示：。请阅读以下内容：。相关问题：@alexanderfarkas非常感谢！！这真的很有帮助D@TheWaldorf乐于助人，这是由它看起来。他们还可以免费试用建立一个网站。一个人可以使用同位素，懒汉和图片，顺便说一句。谢谢！你说得对，它是用平方空间制作的，但我不想用平方空间。你知道如何使用同位素懒散负荷和图像复制这些结果吗？这里有一些演示：。请阅读以下内容：。相关问题：@alexanderfarkas非常感谢！！这真的很有帮助D@TheWaldorf很乐意帮忙

<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>

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

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

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

$(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');
});
});