jquery帮助-加载所有图像后初始化砌体

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

这是做什么的：

1. 等待文档准备好
2. 等待容器内的图片加载完毕
3. 在容器上运行砌体

Answer 2

您可以在$(window).load(function() 中插入代码，并在加载所有元素后进行人工初始化。

例子：

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