Від автора: вітаю вас, друзі. Продовжуємо знайомитися з колекцією ТОП плагінів jQuery. Сьогодні у нас на черзі цікавий плагін RowGrid.js, який дозволяє вибудовувати картинки (або інші об’єкти) у вигляді сітки, як в картинках Google.
Приклад роботи плагіна можна подивитися прямо на офіційному сайті RowGrid.js.
Як ви розумієте, плагін буде дуже корисний у тому випадку, якщо у нас є багато зображень, з яких ми хочемо зробити щось на зразок галереї. Але при цьому розміри зображень різні. Звичайно, ніхто не заважає нам підготувати зображення перед розміщенням на сайті, зробити їх розміри однаковими, але згадайте, як цікаво виглядають Google картинки, маючи різні розміри. Ось, власне, схожий ефект дозволяє реалізувати і наш плагін RowGrid.js.
Завантажити його можна прямо з офіційного сайту. Після отримання архіву з плагіном, підключимо його до нашої сторінці:
Тепер додамо картинки, використовуючи наступну верстку:
…
Також трохи стилів для блоків з картинками:
.item {
float: left;
margin-bottom: 15px;
}
.item img {
max-width: 100%;
max-height: 100%;
vertical-align: bottom;
}
В результаті без використання плагіна галерея зображень виглядає так:
А тепер спробуємо з плагіном. Для цього викличемо метод rowGrid(), передавши йому деякі параметри:
$(function() {
$(“.container”).rowGrid({itemSelector: “.item”, minMargin: 10, maxMargin: 25, firstItemClass: “first-item”});
});
Як бачимо, різні по ширині картинки тепер не танцюють на сторінці, а цілком собі красиво і акуратно на ній розташувалися. Мені подобається. На цьому у мене все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і бібліотеці jQuery UI ви можете дізнатися з наших уроків або курсу. Удачі!
