Від автора: дуже часто на сторінках веб-сайтів необхідно відображати велику кількість різних за розмірами блоків з певною інформацією. І часом оптимально розмістити дані елементи буває досить складно, особливо якщо передбачається, що сторінка буде проглядатися як на звичайних комп’ютерах, так і на мобільних пристроях. Тому в даному уроці я хотів би представити Вашій увазі дуже корисну бібліотеку під назвою Masonry jquery, яка автоматично розташує блоки з інформацією в найбільш оптимальному варіанті.
Отже, бібліотека Masonry – це спеціальна JavaScript бібліотека, яка призначена для оптимального динамічного розміщення різних блоків з інформацією на сторінках сайту, при цьому все вільне місце буде максимально використаний. Так як розрахунок розміщення блоків спирається на їх розміри, а це дозволяє раціонально використовувати наявний простір.
Для початку, давайте розглянемо тестовий сайт, з яким ми будемо сьогодні працювати.
Зверніть увагу, що в центральному блоці, з сірим фоном, необхідно розмістити всі вкладені елементи, які зараз з’являються, так сказати в стовпчик, один за іншим. При цьому HTML структура даної сторінки наступна:
Masonry
Masonry
Правила CSS, які формують оформлення і визначають ширину кожного блоку.
body {
background-color: #ac6722;
}
.wrap {
width: 100%;
}
.karkas {
width: 1000px;
height:1000px;
background-color: #e6e6e6;
border-radius: 10px;
margin:0px auto;
text-align: center;
padding:30px 10px 0px 10px;
}
.baner {
padding:30px;
background-color:#c0efd3;
width: 650px;
text-align: left;
margin-bottom: 15px;
}
.grid-item {
padding:10px;
width:200px;
margin-bottom: 20px;
border-radius: 5px;
}
.grid {
margin: 0 auto;
}
.width1 {
width:200px;
}
.width2 {
width:450px;
}
.blue {
background-color: cyan;
}
.red {
background-color: red;
}
.gray {
background-color: gray;
}
.green {
background-color: green;
}
.white {
background-color: white;
}
.yellow {
background-color: yellow;
}
Тепер давайте перейдемо на офіційний сайт розробника бібліотеки Masonry.
Потім, використовуючи посилання “Download masonry pkgd.min.js”, завантажуємо останню актуальну версію бібліотеки в каталог зберігання скриптів JavaScript (в моєму випадку це папка js). Так само для роботи нам знадобиться бібліотека jQuery. Тому скачайте її і аналогічно скопіюйте в той же каталог.
Тепер підключаємо викачані бібліотеки до тестовій сторінці.
Крім цього я підключив порожній файл script.js, в якому ми будемо вести кодування на мові JavaScript.
Отже, бібліотека Masonry завантажена і підключена, а значить ми можемо приступати до роботи з нею. Для цього переходимо в вищезазначений файл і додамо наступний код:
jQuery(function ($) {
$(‘.grid’).masonry({
itemSelector: ‘.grid-item’,
columnWidth: 50,
});
});
Зараз ми розглянемо роботу бібліотеки в зв’язці з jQuery. А отже, вибираємо батьківський елемент з класом grid, в якому повинні бути розміщені цікаві блоки і викликаємо на виконання метод masonry(). В якості першого аргументу передаємо у вигляді літерала об’єкта набір обов’язкових параметрів:
itemSelector – CSS селектор елементів, які необхідно оптимально розмістити в блоці, для якого викликаний метод masonry().
columnWidth – ширина колонок сітки, яка буде використовуватися для розрахунку позицій елементів.
Оновивши інформацію в браузері ми побачимо наступний результат.
Як Ви бачите, всі блоки нормально відображаються, за винятком першого елемента з класом baner , який по суті не було порушено бібліотекою, так як він не потрапляє під вибірку блоків, що задовольняють селектору, зазначеному в пункті “itemSelector”.
А значить, давайте додамо додаткову настройку:
jQuery(function ($) {
$(‘.grid’).masonry({
itemSelector: ‘.grid-item’,
columnWidth: 50,
stamp: “.baner”
});
});
За допомогою параметра stamp, Ви можете вказати селектор того елемента, який буде зафіксований на своїй позиції. При цьому результат буде наступним.
Таким чином, цікавлять блоки оптимально розміщені на сторінці і для реалізації цього ми додали всього кілька рядків коду. Відповідно використовувати бібліотеку дуже легко. Звичайно, розрахунок позицій елементів здійснюється автоматично, а значить, в залежності від ширини блоків результат розміщення не завжди може бути ідеальним. В цьому випадку потрібно змінити розміри блоків для визначення оптимального результату.
Налаштування, які додатково можна використовувати:
gutter – відстань між відображеними блоками в пікселях.
percentPosition – якщо true, то значення позицій елементів будуть визначені у відсотках;
fitWidth – якщо true, то ширина батьківського контейнера буде визначена виходячи з розмірів відображуваних блоків і кількістю сформованих колонок;
originLeft – даний параметр визначає горизонтальне розташування блоків. Якщо false – елементи будуть розташовуватися праворуч на ліво (за умовчанням цей параметр дорівнює true, а значить, елементи розташовуються зліва на право).
originTop — даний параметр визначає вертикальне розташування блоків. Якщо false – елементи будуть розташовуватися знизу в верх (за умовчанням цей параметр дорівнює true, а значить, елементи розташовуються зверху вниз).
resize – якщо false, позиції елементів не будуть змінюватися при зміні розмірів вікна браузера.
initLayout – якщо false, бібліотека не буде обробляти елементи, а значить, вони не будуть оптимально розташовуватися в батьківському контейнері.
На цьому даний урок завершений, сподіваюся бібліотека Masonry Вас зацікавила і Ви будете використовувати її у своїх напрацюваннях. Всього Вам доброго і вдалого кодування!!!
