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 не будет опубликован. Обязательные поля помечены *