Используем masonry
Всем привет друзья, сегодня разберем как использовать Masonry чтобы создавать плитки в стиле Pinterest. В конце статьи я описал как использовать Masonry с Bootstrap.
Подключение
Чтобы использовать masonry нам нужно добавить на страницу masonry.pkgd.min.js с сайта плагина.
Я подключил через cdn но вы можете скачать и подключить напрямую с вашего сервера.
<!-- masonry -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js" async></script>Инициализация
jQuery
$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 200
});Vanilla JavaScript
var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
// options
itemSelector: '.grid-item',
columnWidth: 200
});
// element argument can be a selector string
// for an individual element
var msnry = new Masonry( '.grid', {
// options
});HTML
<div class="grid js-masonry" data-masonry-options='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
Простой макет
- Результат
- html
- js
- css
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
</div>$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 80
});.grid {
position: relative;
}
.grid-item {
float: left;
width: 80px;
height: 60px;
background-color: #7fb0ff;
border: 2px solid hsla(0, 0%, 0%, 0.5);
}
.grid-item--width2 {
width: 160px;
}
.grid-item--height2 {
height: 140px;
}
itemSelector: '.grid-item' задает класс элемента, вы можете его изменить если нужно,
columnWidth: 80 задает ширину колонки в пикселях.
Отзывчивый макет
- Результат
- html
- js
- css
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height3"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
</div>$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
}).grid-sizer,
.grid-item {
width: 20%;
}
.grid-item--width2 {
width: 40%;
}Здесь мы задаем percentPosition: true для того чтобы позиции элементов вычислялись в % а не в px, это нужно для того чтобы мы могли сделать сетку отзывчивой.
Элемент .grid-sizer который мы задаем в columnWidth отвечает за размер адаптивной колонки, ширина колонки будет соответствовать ширине этого элемента, указывается вместо явных значений.
Отступы между элементами
- Результат
- css
- js
.grid-item {
margin-bottom: 10px;
}$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 80,
gutter: 10
});Чтобы задать отступ всем элементам нужно добавить свойство gutter(в px) с нужным значением и добавить всем элементам тот-же отступ снизу margin-bottom.
Статический баннер
- Результат
- html
- js
<div class="grid">
<div class="static-banner">Статический баннер</div>
<div class="grid-item"></div>
<div class="grid-item"></div>
...
</div>$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 80
});Рекомендуется всегда указывать itemSelector тогда другие элементы не попадут в сетку.
Это можно отлично использовать, например создавая элементы поверх сетки как этот баннер.
Использование с bootstrap
- Результат
- html
- css
- js
<div class="grid">
<div class="col-lg-3 col-md-6 grid-sizer"></div>
<div class="col-lg-3 col-md-6 grid-item grid-item--height2"></div>
<div class="col-lg-3 col-md-6 grid-item grid-item--height2"></div>
<div class="col-lg-3 col-md-6 grid-item"></div>
<div class="col-lg-3 col-md-6 grid-item"></div>
<div class="col-lg-3 col-md-6 grid-item"></div>
<div class="col-lg-3 col-md-6 grid-item"></div>
<div class="col-lg-3 col-md-6 grid-item grid-item--height2"></div>
<div class="col-lg-3 col-md-6 grid-item"></div>
<div class="col-lg-3 col-md-6 grid-item grid-item--height2"></div>
<div class="col-lg-3 col-md-6 grid-item"></div>
<div class="col-lg-3 col-md-6 grid-item"></div>
<div class="col-lg-3 col-md-6 grid-item grid-item--height2"></div>
</div>.grid-item {
width: 100%;
}$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
});В качестве columnWidth ставим элемент размеченный колонками bootstrap с классом grid-sizer. Теперь элементы будут соответственно вести себя при разных разрешениях, попробуйте уменьшить окно браузера.
