Question

我正在使用砌体插件，但是当页面首次加载时，我的图像会重叠。如果我改变浏览器的宽度，它们就会落到位。开发人员告诉我要执行以下操作，但我不确定如何将其添加到我的custom.js文件中。

我刚被告知：

// with jQuery
var $container = $(’#container’);

// initialize Masonry after all images have loaded
$container.imagesLoaded(function(){
    $container.masonry();
});

任何人都可以正确格式化这个建议，以便我可以使用吗？

Answer 1

他希望您使用imagesLoaded plugin。

加载该插件

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script>

并使用如下：

$(document).ready(function () {
    var $container = $("#container");

    $container.imagesLoaded(function () {
        $container.masonry();
    });
});

这是做什么的：

等待文档准备好
等待容器内的图像已加载
在容器上运行砌体

Answer 2

您可以在加载所有元素后在$(window).load(function()和mansonry inizialize中插入代码。

示例：

$(window).load(function(){
var $container = $(’#container’);
$container.masonry();
});

jquery help - 在所有图像加载后初始化Masonry

2 个答案: