От автора: и снова здравствуйте. Позвольте представить вам очередной плагин из разряда must have. Сегодня мы познакомимся с еще одним jQuery плагином для организации различных вариантов сетки — это вариант плагина jQuery Masonry. Давайте узнаем, как установить и произвести настройку jQuery Masonry.
Думаю, вы уже работали или могли слышать об известном плагине jQuery Masonry для организации сеток на ваших страницах. Сегодня мы познакомимся с плагином с аналогичным названием, который выполняет ту же задачу — позволяет создавать сетки различных элементов: блоки, фотографии и т.п. Называется он аналогично – jQuery Masonry.
Итак, официальная страница плагина jQuery Masonry доступна по следующей ссылке. Там вы можете скачать плагин, ознакомиться с документацией к нему и настройками jQuery Masonry. Подключим скрипт плагина к нашей странице:
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 сможет построить сетку. Итак, вот мои блоки:
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
И немного стилей для каждого из них:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
.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; } |
Сейчас мы увидим следующую картину:
Как и положено, каждый блок занимает 100% доступной ширины, пока что никакой сетки нет. Теперь инициализируем работу плагина jQuery Masonry:
1 2 3 4 5 |
$(function(){ $('.content').msrItems({ 'colums': 3 }); }); |
Результат можно увидеть, обновив страницу.
Как вы уже догадались, параметр colums указывает на количество колонок, которые должны быть в сетке. Хорошо, а что насчет адаптивности? Давайте попробуем уменьшить ширину окна браузера.
С адаптивностью, как видим, пока что беда. Но не волнуйтесь, автор плагина предлагает дополнительно несколько строк кода, использовав который мы получим адаптивную сетку.
1 2 3 4 5 6 7 |
var time = undefined; $( window ).on('resize', function(e) { clearTimeout(time); time = setTimeout(function(){ $('.content').msrItems('refresh'); }, 200); }); |
В результате мы получили нужное решение.
Над стилями, конечно, еще придется поработать, но в целом у нас уже есть адаптивная секта для объектов различной высоты. И все это буквально за пять минут времени. Великолепно. Думаю, настройка jQuery Masonry не вызовет у вас особых проблем. Ну а у меня на сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!