jquery - 无法让 masonry 工作

Question

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

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这里是一个独立的图书馆。请将它添加到您的导入中，或者不要全部使用它。