Топ плагінів jQuery. Плагін RowGrid.js

29

Від автора: вітаю вас, друзі. Продовжуємо знайомитися з колекцією ТОП плагінів jQuery. Сьогодні у нас на черзі цікавий плагін RowGrid.js, який дозволяє вибудовувати картинки (або інші об’єкти) у вигляді сітки, як в картинках Google.

Приклад роботи плагіна можна подивитися прямо на офіційному сайті RowGrid.js.

Топ плагинов jQuery. Плагин RowGrid.js

Як ви розумієте, плагін буде дуже корисний у тому випадку, якщо у нас є багато зображень, з яких ми хочемо зробити щось на зразок галереї. Але при цьому розміри зображень різні. Звичайно, ніхто не заважає нам підготувати зображення перед розміщенням на сайті, зробити їх розміри однаковими, але згадайте, як цікаво виглядають Google картинки, маючи різні розміри. Ось, власне, схожий ефект дозволяє реалізувати і наш плагін RowGrid.js.

Топ плагинов jQuery. Плагин RowGrid.js

Завантажити його можна прямо з офіційного сайту. Після отримання архіву з плагіном, підключимо його до нашої сторінці:

Тепер додамо картинки, використовуючи наступну верстку:

Топ плагінів jQuery. Плагін RowGrid.js
Топ плагінів jQuery. Плагін RowGrid.js

Також трохи стилів для блоків з картинками:

.item {
float: left;
margin-bottom: 15px;
}
.item img {
max-width: 100%;
max-height: 100%;
vertical-align: bottom;
}

В результаті без використання плагіна галерея зображень виглядає так:

Топ плагинов jQuery. Плагин RowGrid.js

А тепер спробуємо з плагіном. Для цього викличемо метод rowGrid(), передавши йому деякі параметри:

$(function() {
$(«.container»).rowGrid({itemSelector: «.item», minMargin: 10, maxMargin: 25, firstItemClass: «first-item»});
});

Топ плагинов jQuery. Плагин RowGrid.js

Як бачимо, різні по ширині картинки тепер не танцюють на сторінці, а цілком собі красиво і акуратно на ній розташувалися. Мені подобається. На цьому у мене все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і бібліотеці jQuery UI ви можете дізнатися з наших уроків або курсу. Удачі!