Используем masonry


.example__template .grid-item { background: #D26; border: 1px solid #333; border-radius: 5px; float: left; width: 80px; height: 60px; } .example__template .grid-item:hover { opacity: 0.7; } .example__template .grid-item--width2 { width: 160px; } .example__template .grid-item--height2 { height: 140px; } #example1 { } #example2 { } #example2 .grid-sizer, #example2 .grid-item { width: 20%; } /* 2 колонки */ #example2 .grid-item--width2 { width: 40%; } #example3 .grid-item { margin-bottom: 10px; } #example4 .static-banner { position: absolute; left: 10px; top: 10px; padding: 15px 30px; color: white; background: #A2C; z-index: 2; } #example5 .grid-item { width: 100%; }

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