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

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() 中插入您的代码，并在加载所有元素后初始化砌体。

示例：

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

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

jquery help - initialize Masonry after all images have loaded

jquery

jquery-masonry

masonry