无法让砌体工作

Question

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

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

在您的脚本中，您的目标是 class ($(".grid")) 而不是代码中的 ID (<div id="grid">)。

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

编辑

我这里有一个工作示例 here, without the imagesLoaded part, because as of this answer on another question 所以它是一个单独的库。请将其添加到您的导入中，否则不要全部使用它。

无法让砌体工作

Can't Get Masonry To Work

jquery

html

css

jquery-masonry

masonry