От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. Сегодня у нас на очереди интересный плагин RowGrid.js, который позволяет выстраивать картинки (или другие объекты) в виде сетки, как в картинках Google.
Пример работы плагина можно посмотреть прямо на официальном сайте RowGrid.js.
Как вы понимаете, плагин будет очень полезен в том случае, если у нас есть много изображений, из которых мы хотим сделать нечто вроде галереи. Но при этом размеры изображений разные. Конечно, никто не мешает нам подготовить изображения перед размещением на сайте, сделать их размеры одинаковыми, но вспомните, как интересно смотрятся Google картинки, имея различные размеры. Вот, собственно, похожий эффект позволяет реализовать и наш плагин RowGrid.js.
Скачать его можно прямо с официального сайта. После получения архива с плагином, подключим его к нашей странице:
1 2 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.row-grid.js"></script> |
Теперь добавим картинки, используя следующую верстку:
1 2 3 4 5 6 7 |
<div class="item"> <img src="//lorempixel.com/220/200?1" width="220" height="200" /> </div> <div class="item"> <img src="//lorempixel.com/180/200?2" width="180" height="200" /> </div> ... |
Также немного стилей для блоков с картинками:
1 2 3 4 5 6 7 8 9 |
.item { float: left; margin-bottom: 15px; } .item img { max-width: 100%; max-height: 100%; vertical-align: bottom; } |
В результате без использования плагина галерея изображений выглядит пока так:
А теперь попробуем с плагином. Для этого вызовем метод rowGrid(), передав ему некоторые параметры:
1 2 3 |
$(function() { $(".container").rowGrid({itemSelector: ".item", minMargin: 10, maxMargin: 25, firstItemClass: "first-item"}); }); |
Как видим, разные по ширине картинки теперь не пляшут на странице, а вполне себе красиво и аккуратно на ней расположились. Мне нравится. На этом у меня сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!