不能让砌体工作

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