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

38

Від автора: і знову здрастуйте. Дозвольте представити вам черговий плагін з розряду must have. Сьогодні ми познайомимося з ще одним jQuery плагіном для організації різних варіантів сітки — це варіант плагін jQuery Masonry. Давайте дізнаємося, як встановити і зробити налаштування jQuery Masonry.

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

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

Далі нам будуть потрібні деякі елементи сторінки: будь блоки або картинки. Я використовую різнокольорові порожні блоки. Принадність плагіна полягає в тому, що він без проблем може працювати з об’єктами різних розмірів. Тому мої блоки будуть мати різну висоту — подивимося, як плагін jQuery Masonry зможе побудувати сітку. Отже, ось мої блоки:

І трохи стилів для кожного з них:

.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;
}

Зараз ми побачимо наступну картину:

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

Як і годиться, кожен блок займає 100% доступною ширини, поки що ніякої сітки немає. Тепер ініціалізуємо роботу плагін jQuery Masonry:

$(function(){
$(‘.content’).msrItems({
‘colums’: 3
});
});

Результат можна побачити, оновивши сторінку.

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

Як ви вже здогадалися, параметр colums вказує на кількість колонок, які повинні бути в сітці. Добре, а що щодо адаптивності? Давайте спробуємо зменшити ширину вікна браузера.

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

З адаптивністю, як бачимо, поки що біда. Але не хвилюйтеся, автор плагіна пропонує додатково кілька рядків коду, використавши який ми отримаємо адаптивну сітку.

var time = undefined;
$( window ).on(‘resize’, function(e) {
clearTimeout(time);
time = setTimeout(function(){
$(‘.content’).msrItems(‘refresh’);
}, 200);
});

В результаті ми отримали потрібне рішення.

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

Над стилями, звичайно, ще доведеться попрацювати, але в цілому у нас вже є адаптивна секта для об’єктів різної висоти. І все це буквально за п’ять хвилин часу. Чудово. Думаю, налаштування jQuery Masonry не викличе у вас особливих проблем. Ну а в мене на сьогодні все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і JavaScript ви можете дізнатися з наших уроків або курсу. Удачі!