벽돌을 만들 수 없습니다.

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")에서로 변경하고 주어진 코드에서 볼 수있는 한 작동해야합니다. 또한 스크립트를 두 번 가져 오는 중임을 알 수 있습니다.

편집

난에 있기 때문에 여기 this answer on another question의로,imagesLoaded 부분없이 작동 예를 here, 이는 SO 별도의 라이브러리입니다. 가져 오기에 추가하거나 모두 사용하지 마십시오.