javascript - Masonry + LazyLoad - 图像叠加

Question

我正在使用base Mansory layout用于构建基本图像网格。必须从数据库加载数百或数千张图像以希望构建无限滚动页面，我不希望用户必须下载所有这些图像，主要是因为加载时间，但也因为所有浪费的流量意思是(用户不应该加载图像#500，除非他向下滚动直到到达它)。 为了实现这一点，我尝试使用 jQuery LazyLoad 插件。

这就是我填充 Masonry 图像网格的方式:

            <ul class="grid effect-3" id="grid">
            <?php
            for ($i = 0; $i < count($thumbArray); $i++) {
                if ($i < 9) {
                    echo '<li><img class="img-grid" alt="' . $descArray[$i] . '" data-fullsize="' . $imgArray[$i] . '" src="' . $thumbArray[$i] . '"></li>';
                } else {
                    echo '<li><img class="img-grid lazy" alt="' . $descArray[$i] . '" data-fullsize="' . $imgArray[$i] . '" data-original="' . $thumbArray[$i] . '"></li>';
                }

            }
            ?>
        </ul>

基本上是预先加载前 9 个图像，并将“lazy”CSS 类添加到其他图像中，并用 Lazyload 的“data-original”替换“src”属性。

(您可能会注意到“alt”和“data-fullsize”属性，我将它们用于灯箱系统，您可以出于此问题的目的忽略它们)。

在index.php脚本的末尾我有:

<script src="js/jquery.lazyload.js"></script>
<script>$("img.lazy").lazyload();</script>

导入插件并将其应用到带有 .lazy 类的 img 标签。

问题在于，我假设由于不知道图像的高度，Masonry 网格系统会覆盖通过 Lazyload 过程加载的任何图像:

正如您所看到的，在第 9 个图像之后(当延迟加载规范启动时)，图像开始相互重叠。我想这是因为图像位置是通过Javascript动态计算的，因为它们都设置了position:absolute和顶部和左侧属性，但我不确定。

看Masonry网站，第一个FAQ item与此相关，并建议使用 imagesLoaded，我已经尝试过这样做，但没有成功。

• 我尝试过通过 PHP 的 getimagesize() 计算图像的高度并将其设置为内联样式属性，但它在服务器上的强度太大并且加载时间太长。
• 我也尝试过在到达页面末尾时动态添加元素(通过 XHR 获取数据库元素将是一个简单的解决方案)，但我没有成功 - 可能我需要为此使用 Masonry 的附加功能？

底线是，几天来我一直在尝试寻找解决方案，现在正在阅读类似的线程并实现多个解决方案，但无济于事。 Masonry 网格系统是为了我的目的而指示的，因为图像大小可能会有所不同(例如，我不希望每个垂直图像后面都有间隙)，但我真的发现将它与 Lazyload 结合起来很麻烦，如果没有它，用户只会体验到超出必要的加载时间，服务器将承受不必要的压力。

图片不重叠的解决办法？提前致谢 (y)

Answer 1

您可以使用 imagesLoaded 插件，可在此处找到:http://imagesloaded.desandro.com/ 然后每次加载图像时，您都可以刷新网格的布局，它将如下所示:

// init Masonry
var $grid = $('.grid').masonry({
  // options...
});

// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry('layout');
});

每次您向网格添加更多元素(可能是通过 AJAX)时，您都需要执行布局砖石的行

如果您对此遇到困难，您可以使用现成的插件，例如:https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020使用此插件，您可以非常轻松地指定元素之间的空间、每个分辨率的列数等等，它还具有添加过滤器、排序和搜索字段的功能