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

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

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

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

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

<script src="https://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>

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

.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
	});
});

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

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

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

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

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

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

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

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree