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

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

Как компании электронной коммерции используют данные для улучшения взаимодействия с клиентами

Отслеживание данных об опыте работы с клиентами позволяет получить представление
Показать полностью...

Целевые страницы, что это такое и зачем они Вам понадобятся

Целевая страница-это страница на вашем веб-сайте, специально разработанная для т
Показать полностью...

Создание веб - сайта на основе системы управления контентом (cms) hubspot?

Не облажайтесь, нанимая разработчика или покупая шаблон CMS HubSpot. Вот как вы
Показать полностью...

26 способов повысить коэффициент конверсии вашей электронной коммерции

Как вы повышаете коэффициент конверсии своего интернет-магазина? Будь то покупки
Показать полностью...

4 красноречивых признака того, что ваш бизнес достиг потолка [интервью]

Эти 4 показателя подскажут вам, когда вам необходимо провести капитальный ремонт
Показать полностью...