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

Используем masonry

Используем masonry
Автор
Анатолий Ахматов
На чтение
1:32 мин
Обновлено
06.08.2021

Всем привет друзья, сегодня разберем как использовать Masonry чтобы создавать плитки в стиле Pinterest. В конце статьи я описал как использовать Masonry с Bootstrap.

masonry

Подключение

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

Также может понравится

24 слабых интеграции, без которых команды не могут жить

В каталоге приложений Slack более 1500 приложений. Мы попросили более 50 маркето
Показать полностью...

18 советов экспертов для проведения вашей первой маркетинговой кампании по влиянию

От определения ваших персонажей до проведения информационно–пропагандистской раб
Показать полностью...

Советы по дизайну некоммерческого сайта

Некоммерческие веб-сайты служат центром для всей организации. В этом видеоблоге
Показать полностью...

4 решаемые задачи маркетингового агентства [исследование агентства hubspot 2018]

HubSpot опросил более 1000 агентств, чтобы узнать о наиболее распространенных пр
Показать полностью...