Packery 和 imagesLoaded 插件不起作用？

Question

我在网站上使用 Packery 并下载了 imagesLoaded，但我的图像在页面加载时仍然重叠。该网站可以看到here，我的代码如下：

$(document).ready(function() {
var $container = $container.packery({
   itemSelector: "packery-item"
});
$container.imagesLoaded( function() {
   container.packery();
});
});

任何帮助将不胜感激。

编辑： html 代码如下所示：

<div class="packery js-packery">

<div class="packery-item item"><img src="imgs/cdg5.jpg"></img></div>
<div class="packery-item text"><img src="imgs/text1.png"></img></div>
<div class="packery-item item w2"><img src="imgs/cdg3.jpg"></img></div>
<div class="packery-item gif"><img src="imgs/gif1.gif"></img></div>

</div>

等等

Answer 1

问题是打包是在您的项目中的图像加载之前执行的。因此，Packery 无法知道元素必须有多高。

解决方案是使用 jquery 检查是否已加载所有图像，然后执行 Packery。我已经找到了几种方法来做到这一点，here 的解决方案似乎不错。

解决此问题的另一种方法是在 css 中为图像提供固定高度或使用 height 属性。但是，您只能在图像具有相同高度或预先知道高度时才可以这样做。

更新： 这是第一个解决方案的示例代码：

$(document).ready(function(){

    var cnt = $("img").length;
    $("img").one("load", function() {
        cnt--;

        // If all images are loaded, init Packery
        if (cnt === 0)
        {
            $(".js-packery").packery({
               itemSelector: "packery-item"
            });
        }

    }).each(function() {
      if(this.complete) $(this).load();
    });

});