Топ плагинов jQuery. Плагин для сетки jQuery Masonry

Дата публикации: 2017-03-15

От автора: и снова здравствуйте. Позвольте представить вам очередной плагин из разряда must have. Сегодня мы познакомимся с еще одним jQuery плагином для организации различных вариантов сетки — это вариант плагина jQuery Masonry. Давайте узнаем, как установить и произвести настройку jQuery Masonry.

Думаю, вы уже работали или могли слышать об известном плагине jQuery Masonry для организации сеток на ваших страницах. Сегодня мы познакомимся с плагином с аналогичным названием, который выполняет ту же задачу — позволяет создавать сетки различных элементов: блоки, фотографии и т.п. Называется он аналогично – jQuery Masonry.

Итак, официальная страница плагина jQuery Masonry доступна по следующей ссылке. Там вы можете скачать плагин, ознакомиться с документацией к нему и настройками jQuery Masonry. Подключим скрипт плагина к нашей странице:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/masonry.js"></script>

1 2	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/masonry.js"></script>

Далее нам потребуются некоторые элементы для страницы: любые блоки или картинки. Я использую разноцветные пустые блоки. Прелесть плагина заключается в том, что он без проблем может работать с объектами различных размеров. Поэтому мои блоки будут иметь разную высоту — посмотрим, как плагин jQuery Masonry сможет построить сетку. Итак, вот мои блоки:

<div class="container content">
	<div class="itm1 msrItem"></div>
	<div class="itm2 msrItem"></div>
	<div class="itm3 msrItem"></div>
	<div class="itm4 msrItem"></div>
	<div class="itm5 msrItem"></div>
	<div class="itm6 msrItem"></div>
	<div class="itm7 msrItem"></div>
	<div class="itm8 msrItem"></div>
	<div class="itm9 msrItem"></div>
	<div class="itm10 msrItem"></div>
</div>

</div>

И немного стилей для каждого из них:

.itm1 {
    background: #E23737;
    height: 100px;
}

.itm2 {
    background: #03A9F4;
    height: 190px;
}

.itm3 {
    background: #009652;
    height: 160px;
}

.itm4 {
    background: #9C27B0;
    height: 233px;
}

.itm5 {
    background: #86D85E;
    height: 240px;
}

.itm6 {
    background: #F44336;
    height: 225px;
}

.itm7 {
    background: #FF9800;
    height: 230px;
}

.itm8 {
    background: #E8DA59;
    height: 130px;
}

.itm9 {
    background: #00BCD4;
    height: 200px;
}

.itm10 {
    background: #3F51B5;
    height: 150px;
}

.itm1 {

background: #E23737;

height: 100px;

}

.itm2 {

background: #03A9F4;

height: 190px;

}

.itm3 {

background: #009652;

height: 160px;

}

.itm4 {

background: #9C27B0;

height: 233px;

}

.itm5 {

background: #86D85E;

height: 240px;

}

.itm6 {

background: #F44336;

height: 225px;

}

.itm7 {

background: #FF9800;

height: 230px;

}

.itm8 {

background: #E8DA59;

height: 130px;

}

.itm9 {

background: #00BCD4;

height: 200px;

}

.itm10 {

background: #3F51B5;

height: 150px;

}

Сейчас мы увидим следующую картину:

Топ плагинов jQuery. Плагин для сетки jQuery Masonry

Как и положено, каждый блок занимает 100% доступной ширины, пока что никакой сетки нет. Теперь инициализируем работу плагина jQuery Masonry:

$(function(){
	$('.content').msrItems({
		'colums': 3
	});
});

$(function(){

$('.content').msrItems({

'colums': 3

});

Результат можно увидеть, обновив страницу.

Топ плагинов jQuery. Плагин для сетки jQuery Masonry

Как вы уже догадались, параметр colums указывает на количество колонок, которые должны быть в сетке. Хорошо, а что насчет адаптивности? Давайте попробуем уменьшить ширину окна браузера.

Топ плагинов jQuery. Плагин для сетки jQuery Masonry

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

var time = undefined;
$( window ).on('resize', function(e) {
	clearTimeout(time);
	time = setTimeout(function(){
		$('.content').msrItems('refresh');
	}, 200);
});

var time = undefined;

$( window ).on('resize', function(e) {

clearTimeout(time);

time = setTimeout(function(){

$('.content').msrItems('refresh');

}, 200);

});

В результате мы получили нужное решение.

Топ плагинов jQuery. Плагин для сетки jQuery Masonry

Над стилями, конечно, еще придется поработать, но в целом у нас уже есть адаптивная секта для объектов различной высоты. И все это буквально за пять минут времени. Великолепно. Думаю, настройка jQuery Masonry не вызовет у вас особых проблем. Ну а у меня на сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!

Метки: jquery