Sc0undRel
@Sc0undRel

Почему не работает Masonry?

Пациент:
https://adlab.ee/nashi-klienty/

Почему между блоками пробелы?? Я хочу красивую аккуратную сеточку. Что неправильно в скрипте masonry?

5adcd2debae07755308959.png
<div id="container">
        <div class="back-to-site">
            <a href="http://zaurmag.ru/priyatny-e-poleznosti-dlya-sajta/masonry-kirpichnyj-effekt-elementov-na-sajte-dokumentatsiya-na-russkom-yazyke.html"> Вернуться на сайт </a>
        </div>
        <h1>Masonry - библиотека сетки с кирпичным эффектом элементов</h1>
        <div class="elements-gride">
            <img class="element-item" src="/wp-content/demos/masonry/demo-masonry/images/img1.jpg" />
            <img class="element-item" src="/wp-content/demos/masonry/demo-masonry/images/img2.jpg" />
            <img class="element-item" src="/wp-content/demos/masonry/demo-masonry/images/img3.jpg" />
            <img class="element-item" src="/wp-content/demos/masonry/demo-masonry/images/img4.jpg" />
            <img class="element-item" src="/wp-content/demos/masonry/demo-masonry/images/img5.jpg" />
            <img class="element-item" src="/wp-content/demos/masonry/demo-masonry/images/img6.jpg" />
            <img class="element-item" src="/wp-content/demos/masonry/demo-masonry/images/img7.jpg" />
            <img class="element-item" src="/wp-content/demos/masonry/demo-masonry/images/img8.jpg" />
            <img class="element-item" src="/wp-content/demos/masonry/demo-masonry/images/img9.jpg" />
            <img class="element-item" src="/wp-content/demos/masonry/demo-masonry/images/img10.jpg" />
            <img class="element-item" src="/wp-content/demos/masonry/demo-masonry/images/img11.jpg" />
            <img class="element-item" src="/wp-content/demos/masonry/demo-masonry/images/img12.jpg" />
            <img class="element-item" src="/wp-content/demos/masonry/demo-masonry/images/img13.jpg" />
            <img class="element-item" src="/wp-content/demos/masonry/demo-masonry/images/img14.jpg" />
            <img class="element-item" src="/wp-content/demos/masonry/demo-masonry/images/img15.jpg" />
            <img class="element-item" src="/wp-content/demos/masonry/demo-masonry/images/img16.jpg" />
            <img class="element-item" src="/wp-content/demos/masonry/demo-masonry/images/img17.jpg" />
            <img class="element-item" src="/wp-content/demos/masonry/demo-masonry/images/img18.jpg" />
            <img class="element-item" src="/wp-content/demos/masonry/demo-masonry/images/img19.jpg" />
            <img class="element-item" src="/wp-content/demos/masonry/demo-masonry/images/img20.jpg" />
        </div>
    </div>
</body>

</html>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script>
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.js"></script>
<script>
var $grid = $('.elements-gride').imagesLoaded(function() {
    // init Masonry after all images have loaded
    $grid.masonry({
        // options
        itemSelector: '.element-item',
        columnWidth: 280,
        gutter: 15
    });
});
</script>
  • Вопрос задан
  • 655 просмотров
Пригласить эксперта
Ответы на вопрос 1
@vaajnur
битриксоид
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы