メーソンリーが働くことができません

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

あなたのスクリプトでは、コード（<div id="grid">）にあるIDではなく、クラス（$(".grid")）をターゲットにしています。

$(".grid")からに変更してください。これは、指定されたコードからわかるように動作します。また、スクリプトを2回インポートすることにも注意してください。

EDIT

this answer on another questionのようここSOで、それは別のライブラリですので、私は、なしimagesLoaded一部、実施例hereを持っています。あなたの輸入品にそれを加えてください、またはそれをすべて使用しないでください。