Невозможно получить масонство для работы

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> 

Edit: это то, что моя страница выглядит. http://i.imgur.com/6ARkE79.jpg

Answer 1

В вашем скрипте вы нацеливаете класс ($(".grid")) вместо идентификатора, который находится в коде (<div id="grid">).

Изменить $(".grid") на $("#grid"), и он должен работать, насколько я могу видеть из данного кода. Также обратите внимание, что вы дважды импортируете скрипты.

EDIT

У меня есть рабочий пример here, безimagesLoaded часть, потому что, как из this answer on another question здесь на SO это отдельная библиотека. Пожалуйста, добавьте его в свой импорт или не используйте его все.