具有延迟加载的砌体 jquery 插件答案

【问题标题】：Masonry jquery Plugin with lazyloading具有延迟加载的砌体 jquery 插件
【发布时间】：2018-07-24 10:23:54
【问题描述】：

当使用延迟加载图像的砌体时，这意味着它会动态地将它们添加到网格中，所有不在视口中的添加图像都不适合网格。他们堆叠起来。所以我给lazyload加了一个类：

.lazyloading {
    opacity: 0;
    min-height: 350px;

但这并不能解决问题，因为图像具有不同的高度，它们会重叠或有太多的边距。当我调整整个窗口的大小时，即使只是 1px，图像也会完美地重新排列。我也尝试使用 imagesLoaded，但没有帮助。

测试用例： https://codepen.io/anon/pen/EpmpaN

【问题讨论】：

“我也尝试使用 imagesLoaded，但没有帮助” - 现在，它会导致您的笔出现错误。请至少解决这个问题，在您声明“没有帮助”之前......很少会抛出错误的代码。
ImagesLoaded 未添加到笔中。这就是它导致错误的原因。

标签： jquery lazy-loading masonry

【解决方案1】：

这暂时解决了我的问题。滚动时它会重新激活砌体：

var $grid = $('.grid').masonry({
  itemSelector: '.grid-item',
  percentPosition: true,
  columnWidth: '.grid-sizer'
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
    $grid.masonry('layout');
});  
// scroll event to fire masonry
    $(document).ready(function(){
    $(window).scroll(function(){
        if ($(window).scrollTop() > 300){
            $grid.masonry('layout');
        }
    });
});

【讨论】：