0

我在网站上使用 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>

等等

4

1 回答 1

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

});
于 2014-10-13T08:29:39.237 回答