不能讓砌體工作

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在這裏所以它是一個獨立的庫。請將其添加到您的導入中，或者不要全部使用。