Топ плагинов 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