Masonry jQuery. Оптимальне розміщення елементів сайту

19

Від автора: дуже часто на сторінках веб-сайтів необхідно відображати велику кількість різних за розмірами блоків з певною інформацією. І часом оптимально розмістити дані елементи буває досить складно, особливо якщо передбачається, що сторінка буде проглядатися як на звичайних комп’ютерах, так і на мобільних пристроях. Тому в даному уроці я хотів би представити Вашій увазі дуже корисну бібліотеку під назвою Masonry jquery, яка автоматично розташує блоки з інформацією в найбільш оптимальному варіанті.

Masonry jQuery. Оптимальне розміщення елементів сайтуMasonry jQuery. Оптимальне розміщення елементів сайту

Отже, бібліотека Masonry – це спеціальна JavaScript бібліотека, яка призначена для оптимального динамічного розміщення різних блоків з інформацією на сторінках сайту, при цьому все вільне місце буде максимально використаний. Так як розрахунок розміщення блоків спирається на їх розміри, а це дозволяє раціонально використовувати наявний простір.

Для початку, давайте розглянемо тестовий сайт, з яким ми будемо сьогодні працювати.

Masonry jQuery. Оптимальне розміщення елементів сайту

Зверніть увагу, що в центральному блоці, з сірим фоном, необхідно розмістити всі вкладені елементи, які зараз з’являються, так сказати в стовпчик, один за іншим. При цьому HTML структура даної сторінки наступна:

Masonry

Masonry

Some link 1
Some link 1
Some link 1

Правила 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.

Masonry jQuery. Оптимальне розміщення елементів сайту

Потім, використовуючи посилання «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 – ширина колонок сітки, яка буде використовуватися для розрахунку позицій елементів.

Оновивши інформацію в браузері ми побачимо наступний результат.

Masonry jQuery. Оптимальне розміщення елементів сайту

Як Ви бачите, всі блоки нормально відображаються, за винятком першого елемента з класом baner , який по суті не було порушено бібліотекою, так як він не потрапляє під вибірку блоків, що задовольняють селектору, зазначеному в пункті «itemSelector».

А значить, давайте додамо додаткову настройку:

jQuery(function ($) {
$(‘.grid’).masonry({
itemSelector: ‘.grid-item’,
columnWidth: 50,
stamp: «.baner»
});
});

За допомогою параметра stamp, Ви можете вказати селектор того елемента, який буде зафіксований на своїй позиції. При цьому результат буде наступним.

Masonry jQuery. Оптимальне розміщення елементів сайту

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

Налаштування, які додатково можна використовувати:

gutter – відстань між відображеними блоками в пікселях.

percentPosition – якщо true, то значення позицій елементів будуть визначені у відсотках;

fitWidth – якщо true, то ширина батьківського контейнера буде визначена виходячи з розмірів відображуваних блоків і кількістю сформованих колонок;

originLeft – даний параметр визначає горизонтальне розташування блоків. Якщо false – елементи будуть розташовуватися праворуч на ліво (за умовчанням цей параметр дорівнює true, а значить, елементи розташовуються зліва на право).

originTop — даний параметр визначає вертикальне розташування блоків. Якщо false – елементи будуть розташовуватися знизу в верх (за умовчанням цей параметр дорівнює true, а значить, елементи розташовуються зверху вниз).

resize – якщо false, позиції елементів не будуть змінюватися при зміні розмірів вікна браузера.

initLayout – якщо false, бібліотека не буде обробляти елементи, а значить, вони не будуть оптимально розташовуватися в батьківському контейнері.

На цьому даний урок завершений, сподіваюся бібліотека Masonry Вас зацікавила і Ви будете використовувати її у своїх напрацюваннях. Всього Вам доброго і вдалого кодування!!!