Packery和imagesLoaded插件不工作吗？

Question

我在一个网站上使用Packery并下载了imagesLoaded，但是在页面加载时，我的图像仍然重叠。网站可以看到这里，我的代码如下所示：

$(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。我找到了几种方法来做到这一点，这里的解决方案似乎是一个很好的解决方案。

另一种解决这个问题的方法是在css中给图像一个固定的高度，或者给出一个高度属性。但是，只有当图像具有相同的高度或预先知道高度时，才能做到这一点。

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

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

});