23 Август 2017

Автор: mastweb Рубрика: Верстка Комментариев нет

Адаптивные плитки из картинок на сайте плагином masonry

Махровый халат с именной вышивкой - эксклюзивный подарок для всей семь!

Сделаем фон экрана из адаптивных плиток с помощью плагина masonry.

Нам понадобится набор любых изображений, около 12 штук.

Все картинки положим

в папку img.

Скачать плагин masonry

Скачаем три плагина с сайтов или по этой ссылке.

Подключаем плагины в gulpfile.js.

Подключаем плагины masonry в gulpfile.js

Зададим в index.html структуру

Мы будем использовать bootstarp, поэтому первый див у нас с классом conteiner, у этого дива всегда идет следующий класс row.

Объединим все изображения классом masonry.

Разобьем все картинки на три колонки

col-md-3
col-sm-3
col-xs-6

У всех картинок один класс item.

div class="container">
<div class="row">
<div class="masonry">
	<div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/1.jpg" alt="alt"></div>
	<div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/2.jpg" alt="alt"></div>
	<div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/3.jpg" alt="alt"></div>
	<div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/4.jpg" alt="alt"></div>
	<div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/5.jpg" alt="alt"></div>
	<div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/6.jpg" alt="alt"></div>
	<div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/7.jpg" alt="alt"></div>
	<div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/8.jpg" alt="alt"></div>
	<div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/9.jpg" alt="alt"></div>
	<div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/10.jpg" alt="alt"></div>
	<div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/11.jpg" alt="alt"></div>
	<div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/12.jpg" alt="alt"></div>
</div>
</div>
</div>

div class="container">

</div>

Сделаем стилизацию css для картинок

Сперва уберем отступы по бокам padding: 0 у класса masonry.
Дальше размер картинки .item img делаем размер сто процентов width: 100%, чтобы их видеть целиком.
Чтобы item занимали три картинки на весь экран, зададим свойство height: 33.34vh.

.masonry 
	padding: 0
.item 
	height: 33.34vh
.item img 
	width: 100%

.masonry

padding: 0

.item

height: 33.34vh

.item img

width: 100%

Добавим код в common.js

Берем переменную masonry, в которую включены все item.

После того как все картинки загрузятся masonry плагин делает разметку с помощью imagesLoaded.

Когда сформировались картинки задаются правила.

Так как картинки разных размеров они будут разрознено.

Что бы все изображения поставить в один ряд выровнять воспользуемся плагином imagefill , на сайте видно как он работает в демо ролике.

Смысл не главное, какой ширины или высоты колонка изображение подстроится, чтобы занять всю область.

воспользуемся плагином imagefill выравнять картинки

Добавим параметр как на сайте в скрипт $(.item).imagefill ().

Результат работы в браузере.

Результат работы в браузере masonry плагина

Скрипт common.js.

$(function() {
	var $container = $(".masonry");
	$container.imagesLoaded(function () {
		$container.masonry({
			columnWidth: ".item",
			itemSelector: ".item"
		});
		$('.item').imagefill(); 
	});
});

$(function() {

var $container = $(".masonry");

$container.imagesLoaded(function () {

$container.masonry({

columnWidth: ".item",

itemSelector: ".item"

});

$('.item').imagefill();

});