Question

大家！

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

这是网页。如你所见，砌体没有初始化。

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，浮动到右侧。所有图像都位于容器砌体中。列宽和装订线由元素定义。

Answer 1

脚本无效，因为有一个意想不到的';'在以下行中：

columnWidth: container.querySelector('.col_width')

结合ImagesLoaded的JavaScript Masonry未初始化

1 个答案: