1. Ініціалізіруем плагін Masonry
2. Ініціалізація Masonry через javaScript
3. Ініціалізація з допомогою Vanilla JavaScript
4. Ініціалізація через HTML
5. розміри елементів
6. гумова сітка
7. ImagesLoaded
8. Опції (Options)
9. Рекомендовані (Recommended)
10. columnWidth
11. Розміри елементів (Element sizing)
12. percentPosition
13. gutter
14. stamp
15. fitWidth
16. originLeft
17. originTop
18. Налаштування (Setup)
19. containerStyle
20. transitionDuration
21. resize
22. initLayout
23. Masonry на чистому CSS

Доброго часу доби всім! Це моя друга стаття в цьому році. Першу про іконочние шрифт я опублікував зовсім недавно і мене радує, що я знайшов час для написання другої статті з таким невеликим відривом. Поки для мене це невеликий відрив, тому що частіше писати немає можливості, але я намагаюся. 😎 А тепер давайте розберемося про що піде мова в цій статті.

Автором Masonry є David DeSandro з США. Хотілося б сказати йому велике спасибі за такий хороший скрипт. Поширюється дана бібліотека абсолютно безкоштовно, так що сміливо можете використовувати її на своєму сайті. Але спочатку давайте подивимося на деякі приклади роботи Masonry.

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

структура статті

Для початку нам необхідно перейти на сторінку скрипта - http://masonry.desandro.com і завантажити останню версію. На момент написання даної статті це версія - 4.0. Також на даному сайті ви знайдете докладну документацію англійською мовою. Я нижче розберу основні моменти з документації - як підключати, які є опції і т.д. Все зачіпати не буду, тому що я сам в деяких моментах ще не розібрався. Для впровадження на свій сайт потрібно зробити мінімум дій. Ви зараз в цьому переконаєтеся.

На сайті для скачування є дві версії скрипта - стисла (мінімізована) і Незжата. Краще використовувати саме стислу - masonry.pkgd.min.js. Також бібліотеку можна довантажити і з CDN:

Незжата

стисла (мінімізована)

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

Для роботи Masonry нам необхідно створити батьківський блок і покласти в нього самі елементи.

Для наочності я створив демо-сторінку з картинками різних розмірів. Як приклад елементів я взяв саме картинки, тому що вони мають різну висоту, але замість картинок може бути будь-який блок: текст, відео та ін. Спробуйте зменшити вікно браузера і ви побачите, як картинки плавно змінюють свою позицію.

Давайте подивимося як буде виглядати html-код:

CSS-код:

Як бачимо, css використовується тут по мінімуму.

Ініціалізіруем плагін Masonry

Зробити це можна кількома способами.

Ініціалізація Masonry через javaScript

Ви можете використовувати Masonry як jQuery-плагін:

Але майте на увазі, що для цього методу у вас повинна бути підключена бібліотека jQuery:

На демо-сторінці я ініціалізувати Masonry, як jQuery-плагін, тобто код ініціалізації у мене наступний:

Якщо ви звернули увагу методу «masonry ()» ми передали дві опції: ItemSelector і columnWidth. Це обов'язкові дві опції. За словами розробника вони необхідні для нормальної роботи скрипта. Втім, про опції ми поговоримо трохи нижче. Все, після цих дій має всі працювати.

Ініціалізація з допомогою Vanilla JavaScript

Ви можете використовувати Masonry також і з Vanilla JS:

Конструктор Masonry () приймає два аргументи: дочірній елемент контейнера і опції об'єкта. Код ініціалізації буде наступний.

Чесно кажучи, не працював з Vanilla JS тому конкретно не можу сказати чим він хороший, ніж jQuery. Просто знайте, що є такий метод.

Ініціалізація через HTML

Ви можете форматувати Masonry через HTML, не написавши жодного рядка javaScript коду. Для цього знадобиться додати всім дочірнім елементам контейнера атрибут - «data-masonry». Опції можна передати, як значення.

Передані параметри повинні відповідати формату JSON. Хочу звернути вашу увагу на використання лапок в коді. Лапки для атрибута data-masonry пишуться одинарними, а для переданих опцій - подвійні. Тобто саме так, як показано на прикладі.

Даний варіант можна використовувати, якщо ви не хочете використовувати на сайті зайвий javaScript. Наприклад, я б не став зайвий раз вантажити jQuery, якщо на сайті він у мене ніде не використовується.

Ось така ось бібліотека. Нічого складного немає. А що далі?

Якщо звернутися до документації, то далі йде розбір: розміри елементів контейнера, опції, події, методи.

розміри елементів

Розміри дочірніх елементів можуть бути як фіксованими, так і гумовими. При фіксованому розмірі (ширина і висота) елементів ширина блоків і їх оформлення задається в призначеному для користувача css-файлі стилів. По висоті хочу сказати, якщо ви використовуєте не порожні блоки, то висота блоку буде вираховуватися браузером, виходячи з його вмісту. У моєму випадку я висоту не ставлю, тому що картинки тож мають свою висоту.

гумова сітка

При гумової сітці ширина елементів задається у відсотках. Гумову сітку в основному використовують в адаптивному дизайні. Детальніше про опції поговоримо нижче.

ImagesLoaded

Іноді при завантаженні сторінки може трапитися так, що елементи будуть перекривати один одного. При цьому вони збираються всі в один клубок і виглядає все жахливо. Так ось вирішити цю проблему можна за допомогою невеликої бібліотеки - imagesLoaded. Найбільш добре це проявилося у мене при адаптивному дизайні. Саме, коли я сайт відкривав з мобільного телефону сітка зображень у мене збиралася в одну купу.

Підключаємо imagesLoaded з CDN:

За допомогою imagesLoaded елемент позиціонується на сторінці тільки після повної його завантаження.

Або ініціалізація Masonry відбувається тільки після повного завантаження всіх зображень.

Опції (Options)

Тепер давайте розберемо які ми можемо передати опції методу masonry ().

Всі опції згруповані. Ну, це зроблено, щоб легше було в них орієнтуватися.

Тепер давайте подивимося які опції входять в певну групу.

Рекомендовані (Recommended)

itemSelector

Дана опція вказує до яких елементів буде застосовуватися ефект Masonry. Корисно вказувати цю опцію, тому що тим самим ми можемо відсікти елементи які не є частиною макета. Цей параметр нам уже знаком, коли ми розбирали ініціалізацію Masonry.

columnWidth

Задає ширину елементів макета. Якщо даний параметр опустити Masonry візьме зовнішню ширину першого елемента. Розробник завжди радить вказувати ширину колонок, будь то елементи фіксовані або гумові.

Розміри елементів (Element sizing)

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

percentPosition

Код гумової сітки ми розбирали вище, але в подробиці опцій не вдавалися.

Як бачимо, щоб активувати гумову сітку ми додали параметр percentPosition в код ініціалізації з булево значенням «true«. А в якості ширини вказали клас елемента, якому в css присвоєна ширина у відсотках.

gutter

Між елементами можна задати відступ по горизонталі за допомогою опції gutter, передавши число. Число буде відповідати відступами в пікселях.

Відступи по вертикалі між елементами задаються в css.

Відступи можна задати і у відсотках, тобто вони будуть змінюватися в залежності від розміру вікна браузера.

Ми створили порожній DIV-блок перед списком елементів.

У CSS для даного блоку вказали ширину у відсотках. А в коді ініціалізації опції gutter ми вказали клас даного порожнього елемента. Скрипт сам створить відступи в процентах, виходячи з ширини даного блоку.

stamp

Даною опцією можна призначити елементи, які будуть штампувати в сітці Masonry. Інші пункти будуть знаходитися нижче і будуть обтікати штамповані. Іноді це може бути корисним. Опції stamp передаємо клас штампованого елемента.

21933

Детальніше приклад ви можете подивитися на Codepen, а також відредагувати при необхідності.

fitWidth

Суть даної опції полягає в тому, що коли ми її активуємо батьківського блоку елементів додається фіксована ширина в пікселях. Причому ширина батьківського блоку дорівнює сумі ширини всіх дочірніх елементів. Таким чином, вказавши в css батьківського блоку правило «margin: 0 auto» ми можемо розташувати блок з елементами Masonry по центру.

Увага! Дана опція не працює з елементами, ширина яких вказана у відсотках. Значення опції «columnWidth» має бути вказано в пікселях, наприклад, «columnWidth: 120». Інакше, елементи можуть налезть один на одного.

21933

originLeft

За замовчуванням всі елементи сітки вирівнюються зліва на право. З опцією originLeft можна змінити горизонтальний потік елементів і задати вирівнювання справа наліво. Досить передати логічне значення «false».

21933

originTop

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

21933

Налаштування (Setup)

Переходимо до опцій настройок.

containerStyle

Дана опція скасовує стилі батьківського контейнера елементів. За замовчуванням батькові задається правило «position: relative». Дане правило можна скасувати.

Звичайно, можна було і перевизначити через файл CSS за допомогою «! Important», але я не люблю так робити. Взагалі я вважаю це правило поганого тону в верстці. Краще все ж очистити стилі, тим більше розробник дає нам таку можливість.

transitionDuration

Тривалість переходу, коли елементи змінюють своє місце розташування. За замовчуванням задано час - 0.4 сек. Формат часу задається, як формат часу CSS.

Ось деякі приклади установки часу.

resize

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

Чесно кажучи, такого ж ефекту можна домогтися, якщо задати батькові просто фіксований розмір. Тут я не розумію розробника - або я щось не зрозумів, або дана опція має місце бути в певних випадках. Детальніше можете подивитися на прикладі в Codepen. Спробуйте змінити розмір екрана браузера. Потім поміняйте «resize: false» на «resize: true» і зрозумієте про що йде мова.

initLayout

Дана опція активує нашу цегляну сітку при ініціалізації скрипта. За замовчуванням вона включена - «initLayout: true». Але можна і скасувати.

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

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

Masonry на чистому CSS

Є також варіант реалізувати цегляну кладку на чистому css. Не буду наводити тут весь код. Можете глянути на CodePen , Нічого складного немає. В даному випадку зручно тим, що не потрібно підключати зайві js-бібліотеки і розбиратися в опціях плагіна.

В принципі все те, що я виклав вище вистачає, щоб задіяти цегляний ефект на своєму сайті.

А на цьому все. Всім дякую за увагу. Задавайте питання в коментарях, завжди буду радий допомогти. Зустрінемося в наступних статтях. Поки що!

Перевірка орфографії