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高度或具有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();
    });

});