Главная
Блог
Используем masonry

Используем masonry

Автор

Анатолий Ахматов

На чтение

1:32 мин

Обновлено

06.08.2021

Всем привет друзья, сегодня разберем как использовать 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. Теперь элементы будут соответственно вести себя при разных разрешениях, попробуйте уменьшить окно браузера.