Question

我已经下载了最新版本的砌体并复制了网站上的说明，但砌体似乎没有在我的网站上加载。图像彼此相邻浮动，但它们没有正确排列。这是我的代码。

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/masonry-docs/masonry.pkgd.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/masonry-docs/masonry.pkgd.min.js"></script>

<script>
    $(document).ready(function(){
        $("#grid").masonry({
            itemSelector: '.grid-item',
            columnWidth: 310;
    }).imagesLoaded(function() {
        $('#grid').masonry('reload');
    });
</script>

CSS

div#grid {
    margin: 0 auto;
    overflow: hidden;
    width: 95%;
}

div.grid-item {
    display: block;
    float: left;
    margin: 5px;
    width: 300px;
}

div.grid-item img {
    width: 300px;
}

HTML

<div id="grid">
    <div class="grid-item"><img src="example1" /></div>
    <div class="grid-item"><img src="example2" /></div>
</div>

编辑：这就是我的页面的样子。 http://i.imgur.com/6ARkE79.jpg

Answer 1

在您的脚本中，您定位了一个类（$(".grid")），而不是代码中的ID（<div id="grid">）。

将$(".grid")更改为$("#grid")，它应该可以从我给定的代码中看到。另请注意，您要两次导入脚本。

修改

我有一个工作示例here，没有 imagesLoaded部分，因为从this answer on another question开始，所以它是一个单独的库。请将其添加到您的导入中，或者不要全部使用它。

不能让砌体工作

1 个答案: