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

I am using a masonry plugin but my images are overlapping when the page first loads. If I change the width of the browser they fall into place. The developer told me to do the following but I am unsure how to "add it: to my custom.js file properly.

我正在使用一个圬工插件，但是当页面第一次加载时，我的图像是重叠的。如果我改变浏览器的宽度，它们就会就位。开发人员让我做下面的工作，但我不确定如何“添加它:按照我的习惯”。js文件正确。

I was just told to:

我被告知:

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

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

Can anyone properly format this advice so I can use it?

有人能把这个建议格式化，让我使用吗?

2 个解决方案

#1

He wants you to use the imagesLoaded plugin.

他希望你使用imagesLoaded插件。

Load that 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>

and use as follows:

并使用如下:

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

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

What this does is:

什么这是:

Wait for the document to be ready
等待文件准备好
Wait for the images inside the container to have loaded
等待容器内的映像已经加载
Run masonry on the container
在容器上运行砌体

#2

You can insert your code in $(window).load(function() and mansonry inizialize after all element are load.

您可以将代码插入$(窗口).load(函数)和mansonry inizialize中，在所有元素加载之后。

Example:

例子:

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

#1