Масонри сетка – это специфический вывод элементов таким образом, что они заполняют все место в структурных колонках. Пример: вывод изображений на Pinterest
В стартовом шаблоне «Чертоги Фрилансера» 4 реализована возможность построения масонри сетки на основе Isotope . Что позволяет не только выводить элементы в виде масонры сетки, но и добавлять функционал фильтрации, сортировки и т.п.
Расположение компонента
Файлы компонента находятся в папке src/components/layout/masonry, здесь вы найдете JS-файл компонента с базовыми настройками и функционалом фильтрации, HTML-файл с примером кода, а также SCSS-файл для стилизации компонента
Использование компонента
В нужном месте HTML-файта, вы можете воспользоваться снипетом masonry или вручную создать структуру с соответствующими дата-атрибутами:
<div data-fls-masonry class="masonry"><div data-fls-masonry-item class="masonry__item">A</div><div data-fls-masonry-item class="masonry__item">B</div><div data-fls-masonry-item class="masonry__item">C</div></div>Вот пример масонры сетки с возможностью фильтрации:
<div class="masonry"><ul class="masonry__filter filter-masonry"><li class="filter-masonry__item"><a href="#" data-fls-masonry-filter-link="*" class="filter-masonry__link">Использование</a></li> <li class="filter-masonry__item"><a href="#" data-fls-masonry-filter-link="a" class="filter-masonry__link">Фильтр А</a></li><li class="filter-masonry__item"><a href="#" data-fls-masonry-filter-link="b" class="filter-masonry__link">Фильтр B</a></li><li class="filter-masonry__item"><a href="#" data-fls-masonry-filter-link="c" class="filter-masonry__link">Фильтр C</a></li></ul><div data-fls-masonry class="masonry__items"><div data-fls-masonry-item data-fls-masonry-filter="a" class="masonry__item">A</div><div data-fls-masonry-item data-fls-masonry-filter="b" class="masonry__item">B</div><div data-fls-masonry-item data-fls-masonry-filter="c" class="masonry__item">C</div></div></div>Для более широкого использования возможностей компонента см. документацию Isotop