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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Метки:

Похожие статьи:

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