Masonry.js(адаптивна сітка встык по вертикалі) – інструкція, підключення і базове налаштування

Як те набридла, якщо чесно, сумовита і всюди використовувана Bootstrap сітка, та і хотілося реалізувати блоки сітки у стик по вертикалі c повним заповненням. Все не доходили руки, але ось зібрався з силами і все-таки вирішив перейти на використання Masonry.js у своїх проектах. Masonry.js – jQuery плагін, що дозволяє реалізувати сітку блоків за типом Pinterest, тобто – блоки сітки стають встык по вертикалі і заповнюють усю сторінку без жорстко фіксованої висоти блоку. До того ж сітка Masonry.js є адаптивною.

Основні переваги використання Masonry.js, які я знайшов для себе:

  • легкість скрипта;
  • простота налаштування;
  • стильний вид, що не приївся;
  • адаптивність;
  • при невеликій кількості налаштувань, досить широкі можливості;

Отже, приступимо до підключення і базового налаштування.

Спершу посилання на офіційний сайт, де можна викачати сам плагін і проглянути приклади: https://masonry.desandro.com/

Підключення Masonry.js до сайту

Підключення бібліотеки зводитися до стандартного підключення, як і будь-який js до сайту. Гойдаємо плагін по посиланню, закидаємо по FTP в теку на сайті і додаємо в head:

path_to – шлях до скрипта на хостингу

До WordPress можна підключити “кошерним способом”:

Ініціалізація і базове налаштування Masonry.js

Для прикладу використовуватимемо такий ось стандартний шаблон розмітки :

Т.е. контейнер в якому міститимуться блоки матиме клас grid, а самі блоки(осередки сітки) grid – item. Розмітка представлена для прикладу – далі в скрипті ініціалізації Masonry.js Ви можете прописати будь-які власні класи, використовувані на Вашому сайті.

І власне сам скрипт ініціалізації c базовими налаштуваннями(розміщуємо перед тегом /body, що закривається) :

jQuery:

jQuery migrate(WordPress) :

JavaScript:

Тут ми оголошуємо вищеперелічені класи і задаємо ширину блоків(columnWidth) в пікселях.

Після цього сітка вже повинна працювати.

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

Прикладу роботи можете проглянути на офіційному сайті, на головній сторінці нашого сайту, на тестовому блозі nw24.info, на якому експериментую, ну і звичайно ж всім відомий Pinterest. Від себе ж помічу – плагін Masonry.js дуже класний, з легким налаштуванням і широкими можливостями, так що у своїх роботах використовуватиму його почастіше. Ну а в наступних статтях розгляну тонше налаштування Masonry.js і нюанси, які спливли в процесі “експлуатації”.

masonry.js установка налаштування підключення

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *