- Masonry на Javascript
- HTML
- CSS
- Включення Masonry (ініціалізація)
- Ініціалізація через HTML
- Ініціалізація через jQuery
- Ініціалізація для блоків з зображеннями
- спосіб 1
- спосіб 2
- спосіб 3
- властивості
- Масонрі на чистому CSS
- Мінусів у цього варіанту вистачає
Наша взаимовыгодная связь https://banwar.org/
Зустрічали сайти, де блоки різних розмірів виводяться в контейнер, максимально раціонально заповнюючи простір?
Приклад блоків Масонрі →
Зробити такий висновок дозволяє скрипт David'a DeSandro , Який називається Masonry (з англ. Цегляна кладка). Також, наочний приклад можете подивитися на офіційному сайті скрипта . На офф. сайті ви знайдете повну документацію англійською.
Masonry - це Javascript бібліотека, що дозволяє виводити HTML блоки в компактно-складеному вигляді. Скрипт аналізує висоту кожного блоку і максимально економлячи простір має його.
Можливо хтось вже давно чув про нього і навіть використовував його в своїх проектах, але я вперше зіткнувся з ним недавно. Не можу сказати, що кожен зможе легко зробити будь-який висновок. Але з базовим використанням думаю впорається кожен. Розібратися що і як там працює не так просто, але сказати що дуже складно я теж не можу. Якщо ви непогано розбираєтеся в JS, то будь-який висновок повинен вийти. Мета цього посту познайомити вас з Masonry і залишити замітку про нього для себе.
Masonry працює самостійно без використання бібліотек, але також може використовуватися як jQuery плагін.
У цьому пості я зроблю переклад головної сторінки офф-сайту, яка пояснює як почати працювати зі скриптом.
менюMasonry на Javascript
підключення Masonry
Ці пакети установки, містять все що потрібно, для використання Masonry:
Завантажуйте js файл і підключайте його до вашого сайту:
<Script src = "/ path / to / masonry.pkgd.min.js"> </ script>Для WordPress підключати краще використовуючи функцію wp_enqueue_script () :
function mason_script () {// wp_register_script ( 'masonry', '/path/to/masonry.pkgd.min.js'); // верхній рядок не потрібна, тому що в WordPress masonry є в комплекті за замовчуванням, тому можна просто його підключити. wp_enqueue_script ( 'masonry'); } Add_action ( 'wp_enqueue_scripts', 'mason_script'); менюHTML
Masonry працює з елементами контейнера, для яких вказано один і той же клас item:
<Div id = "container"> <div class = "item"> ... </ div> <div class = "item w2"> ... </ div> <div class = "item"> ... </ div> ... </ div>Клас можна вказати будь-який, головне при виклику визначити опцію itemSelector: '.item'.
CSS
Для блоків контейнера потрібно вказати ширину. Ширину потрібно підбирати відповідну контейнеру та параметру columnWidth (ширина колонки):
.item {width: 25%; } .Item.w2 {width: 50%; }Включення Masonry (ініціалізація)
Щоб скрипт почав працювати його потрібно застосувати до нашого контейнера. Запуск скрипта у вигляді примірника на чистому javascript робить так:
var container = document.querySelector ( '# container'); var msnry = new Masonry (container, {// Налаштування columnWidth: 200, itemSelector: '.item'});В цьому випадку конструктор примірника містить 2 аргументи: columnWidth (ширина колонки) і itemSelector (клас блоків в контейнері з якими буде працювати Masonry). Це не всі опції, інші дивіться в документації або нижче на цій сторінці.
Ініціалізація через HTML
Masonry можна запустити не використовуючи Javascript, прямо з HTML, вказавши class js_masonry контейнеру і вказавши параметри в атрибуті data-masonry-options:
<Div id = "container" class = "js-masonry" data-masonry-options = '{ "columnWidth": 200, "itemSelector": ".item"}'>Опції встановлені в HTML повинні бути в форматі JSON. Аргументи повинні бути в лапках "itemSelector" :. Майте на увазі, що значення атрибута HTML має бути в одинарних лапках ', тому що властивості JSON використовують подвійні лапки ".
Ініціалізація через jQuery
Для використання Masonry не потрібно jQuery, але якщо вам зручніше працювати з jQuery, masonry працює з ним як плагін.
var $ container = $ ( '# container'); // Ініціалізація $ container.masonry ({columnWidth: 200, itemSelector: '.item'});Щоб отримати примірник використовуйте метод .data ( 'masonry'):
var msnry = $ container.data ( 'masonry');Ініціалізація для блоків з зображеннями
Так як картинки завантажуються окремо від HTML коду, застосування "Масонрі" для блоків з картинкою зазвичай викликає помилку - накладення одного блоку на інший. Так відбувається тому що Масонрі спрацьовує до того, як картинка в блоці подгружается, блоку встановлюється висота, а потім картинка "руйнує" цю висоту. Вирішити цю проблему можна декількома способами:
спосіб 1
Встановити для всіх зображень розміри жорстко: ширину і висоту в пікселях.
спосіб 2
Повісити обробку Масонрі на подію load. Код для jQuery:
jQuery (window) .load (function () {jQuery ( '. masonry'). masonry ({columnWidth: 310, itemSelector: '. box, .item'});});Мінус цього способу в тому, що тут швидше за все доведеться чекати завантаження всього "вікна": jQuery (window) .load. Використовувати load окремо для елемента рідко допустимо, тому що jQuery буде інтерпретувати його як AJAX функцію load. Щоб цього уникнути використовуйте 3-й приклад.
спосіб 3
Ініціалізувати роботу Масонрі, після того, як всі картинки будуть завантажені. А для перевірки завантаження використовувати додатковий JS скрипт imagesLoaded . код:
var container = document.querySelector ( '# container'); var msnry; // Ініціалізація Масонрі, після завантаження зображень imagesLoaded (container, function () {msnry = new Masonry (container);});Код для jQuery:
var $ container = $ ( '# container'); // Ініціалізація Масонрі, після завантаження зображень $ container.imagesLoaded (function () {$ container.masonry ();});Замітка: також помилка може бути при використанні додаткових шрифтів, тому завантаження шрифтів потрібно перевіряти.
менювластивості
Обов'язкові властивості це: columnWidth and itemSelector. Всі інші можна використовувати за бажанням:
itemSelector (рядок) (обов'язковий) Визначає який дочірній елемент контейнера буде використаний при побудові кладки. Елемент потрібно вказувати, щоб виключити інші елементи контейнера, які використовуються для установки розмірів см. "ColumnWidth": ".grid-sizer".За замовчуванням: немає columnWidth (число / елемент / селектор у вигляді рядка) (обов'язковий) Ширина колонки в пікселях: "columnWidth": 60. Якщо встановити селектор або елемент, masonry буде використовувати ширину встановленого елемента: "columnWidth": ".gutter- sizer ".Masonry розраховує зовнішню ширину блоків, з урахуванням css властивостей border, padding, margin.
За замовчуванням: немає containerStyle (об'єкт) CSS стилі які застосовуються до контейнера. Щоб скасувати застосування masonry стилів до контейнера вкажіть containerStyle: null
За замовчуванням: {position: 'relative'} gutter (число / елемент / селектор у вигляді рядка) Відстань між елементами, подібне margin-right. Приклад: "gutter": 10
За замовчуванням: 0 hiddenStyle (об'єкт) Стилі застосовуються до захованих елементам.
За замовчуванням: {opacity: 0, transform: 'scale (0.001)'} isFitWidth (логічний) Встановлює ширину контейнера рівну доступному числу колонок, розраховану з ширини елементів контейнера. Коли встановлено параметр, ви можете відцентрувати контейнер через CSS. Замітка: це властивість не працює, якщо елементам контейнера встановлена ширина в%, потрібно в пікселях: width: 120px. Також, опція columnWidth повинна бути встановлена в фіксоване значення, наприклад: columnWidth: 120.
За замовчуванням: false isInitLayout (логічний) Включає підстроювання блоків під час ініціалізації. Встановіть в false, щоб скрипт хоч не ставив цегляну кладку при ініціалізації, так ви зможете використовувати методи і додавати події перед обробкою елементів контейнера.
За замовчуванням: true isOriginLeft (логічний) Контролює горизонтальне розташування блоків. За замовчуванням блоки розставляються з ліва на права. Встановіть в false, щоб розташувати блоки з права на лева.
За замовчуванням: true isOriginTop (логічний) Контролює вертикальне розташування блоків. За замовчуванням блоки розташовуються зверху вниз. Встановіть в false, щоб блоки розташовувалися знизу вгору.
За замовчуванням: true isResizeBound (логічний) Пов'язує розташування блоків зі змінами розмірів вікна.
За замовчуванням: true stamp (елемент / масив елементів / рядок селектор / NodeList) Визначає які блоки потрібно зафіксувати при виведенні. Це спеціальні елементи до яких не буде застосований ефект masonry. "Stamp": ".stamp"
За замовчуванням: немає transitionDuration (рядок) Тривалість переходу (швидкість анімації), коли блоки змінюють позицію або з'являються. Потрібно встановлювати в форматі часу для CSS. Щоб скасувати всю анімацію встановіть в 0: transitionDuration: 0
За замовчуванням: '0.4s' visibleStyle (об'єкт) Стилі, які будуть застосовані при показі прихованих елементів.
За замовчуванням: {opacity: 1, transform: 'scale (1)'} меню
Масонрі на чистому CSS
C недавніх пір, практично всі браузери розуміють властивість CSS column-count, Дивіться самі .
А раз так, то більше немає необхідності підключати javascript і можна зробити блоки Masonry на чистому css. Звичайно такий варіант менш гнучкий в настройках, але він в рази простіше і швидше встановлюється і розібратися в ньому простіше.
Суть така.
У нас є такий HTML код:
<Div class = "masonry"> <div class = "item"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </ Div> <div class = "item"> ... </ div> ... <div class = "item"> ... </ div> </ div>І ми підключаємо для нього такі css стилі:
/ * Контейнер блоків Masonry * / .masonry {column-count: 4; // скільки колонок потрібно? column-gap: 1em; // проміжок між блоками (праворуч або ліворуч) / * те ж саме з потрібними префіксами на 18 березня 2016 * / -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 1em; -moz-column-gap: 1em; column-gap: 1em; } / * Блоки Masonry * / .masonry .item {display: inline-block; // важливо! width: 100%; // важливо! margin-bottom: 1em; background-color: #eee; }Дивитися реальний приклад →
Мінусів у цього варіанту вистачає
Пробіжить по мінусів цього методу і чим він поступається масонрі.
Підтримка браузерів, на сьогодні (2016 г.) відмінна , Але все-таки не повна ...
Будь-яку анімацію, потрібно буде дописувати вручну.
Головний мінус column-count та, власне, причина, по якій не можна використовувати цей спосіб замість masonry в більшості випадків - це напрямок блоків.
Якщо у masonry читається по горизонталі:
1 2 3
4 5 6То в column-count по вертикалі:
1 3 5
2 4 6З таким підходом використовувати з хронологічної точки зору не варіант.
з коментаря
Динамічне додавання елементів в блок, наприклад при AJAX навантаження, збиває з пантелику ... Тобто Масонрі, додає нові елементи після поточних і не чіпає поточні, так немає плутанини що додалося, а що ні. А ось цей варіант, плутає елементи.
Наприклад, у нас є 3 колонки і 30 елементів - умовно по 10 в кожному стовпчику. Додаємо ще 10 і вони додадуться не рівномірно в усі 3 колонки, не зачіпаючи попереднє розташування елементів, а додадуться в HTML, а потім браузер перебудує розташування. При цьому в першу колонку може потрапити 1 елемент, в другу 2, а в третю 8. У результаті, після динамічного додавання елементів майже завжди виходить плутанина: що було і що додалося ...
Тому, якщо плануєте довантажувати елементи Аяксом - цей варіант розглядати не варто!
