JavaScript Masonry 结合 ImagesLoaded 未初始化答案

【问题标题】：JavaScript Masonry combined with ImagesLoaded is not initializedJavaScript Masonry 结合 ImagesLoaded 未初始化
【发布时间】：2014-08-15 06:38:40
【问题描述】：

大家！

我正在从头开始构建我的第一个网站。我知道 HTML 和 CSS，但我对 JavaScript 和 PHP 的了解非常基础。因此，对于我使用 Masonry 网格布局库的网站，将其与 ImagesLoaded 相结合，这样图像就不会重叠。根据官方网页上的说明，我在我的 HTML 中包含了一个脚本，但不知何故它根本不起作用。（没有 ImagesLoaded 的 Masonry 正在工作，但图像重叠。）请告诉我，我做错了什么。

这是网页。如您所见，Masonry 未初始化。

http://vprilenska.netai.net/design_archandfilm.php

这是脚本。我已经将它包含在我的 HTML 底部的正文结束标记之前。

<script src='js/masonry.js'></script>
<script src='js/imagesloaded.js'></script>
<script>
    var container = document.querySelector('#masonry');
    var msnry;
    // initialize Masonry after all images have loaded
    imagesLoaded( container, function() {
        msnry = new Masonry( container, {
        gutter: container.querySelector('.gut_width'),
        itemSelector: '.item',
        stamp: '.stamp',
        columnWidth: container.querySelector('.col_width');
        });
    });
    </script>

是的，砌体应用于物品。每个项目都是一个带有图像和标题的 div，向右浮动。所有图像都位于容器砌体中。列宽和装订线由元素定义。

【问题讨论】：

您是否尝试过在文档就绪事件中执行此操作？
我已经在 window.onload 事件中尝试了 Masonry，它工作正常。但正如官方网页所建议的那样，我也想尝试 ImagesLoaded。此外，我想使用 JavaScript 解决方案，而不是 jQuery。
当您将代码放入文档就绪函数中时，代码将在所有元素加载后运行。您可能会尝试在图像完全加载之前对其进行排列。试试这个 $( document ).ready(function() { // 把你的旧代码放在这里 });
masonry 也准备好了文档github.com/desandro/doc-ready
@astro 将脚本放在 </body> 之前就像 OP 明确指出他们所做的那样具有相同的效果

标签： javascript masonry imagesloaded

【解决方案1】：

脚本无法运行，因为出现了意外的“;”在以下行中：

columnWidth: container.querySelector('.col_width')

【讨论】：