Дата публикации
10 Апреля 2020
Дата изменения
4 Июля 2020
Уникальных просмотров
4.835

Оглавление

Для создания фильтров и сортировки элементов, можно воспользоваться библиотекой под названием Isotope. Библиотека состоит всего из одного JS файла, минифицированная версия которого весит менее 40 килобайт.

Для работы Isotop, необходимо подключить библиотеку jQuery.

Подключение

Для подключения библиотеки к вашему проекту, достаточно выполнить команду:

npm install isotope-layout --save

После чего подключить минифицированную версию JS файла:

node_modules/isotope-layout/dist/isotope.pkgd.min.js

Инициализация

Теперь нужно инициализировать плагин в вашем проекте. Иными словами, указать, с чем ему придется работать и что фильтровать. Сделать это можно и через синтаксис jQuery и на ванильном JavaScript:

// Vanilla JS
let grid = document.querySelector('.grid');
let iso = new Isotope( grid, {
  // options...
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: 200
  }
});

// jQuery
$('.grid').isotope({
  // options...
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: 200
  }
});

Приблизительная HTML разметка будет такая:

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>

Мы указываем плагину, что элемент с классом grid является контейнером, а элементы с классом grid-item, это дочерние элементы контейнера, которые мы будет фильтровать.

Фильтрация

Для фильтрации нам необходимо сделать разметку из кнопок, с помощью которых мы будем фильтровать элементы:

<div class="filters-button">
    <a href="#" class="filter-btn filter-active" data-filter="*">Все элементы</a>
    <a href="#" class="filter-btn" data-filter=".blue">Синие</a>
    <a href="#" class="filter-btn" data-filter=".green">Зеленые</a>
    <a href="#" class="filter-btn" data-filter=".yellow">Желтые</a>
    <a href="#" class="filter-btn" data-filter=".grey">Серые</a>
</div>

Разметку можно делать как с помощью тегов a, так и с помощью тегов button. Разница лишь в том, что при использовании тега a, придется отменить действие браузера с помощью функции preventDefault().

Сама фильтрация происходит по значению дата-атрибута data-filer.

У элементов списка нужно прописать эти значения:

<div class="grid">
  <div class="grid-item grey"></div>
  <div class="grid-item blue"></div>
  <div class="grid-item green"></div>
  <div class="grid-item green"></div>
  <div class="grid-item blue"></div>
  <div class="grid-item green"></div>
  <div class="grid-item yellow"></div>
  <div class="grid-item green"></div>
  ...
</div>

У элемента могут быть несколько значений:

<div class="grid">
  <div class="grid-item grey"></div>
  <div class="grid-item blue"></div>
  <div class="grid-item green grey blue"></div>
  <div class="grid-item green blue yellow"></div>
  <div class="grid-item blue"></div>
  <div class="grid-item green"></div>
  <div class="grid-item yellow"></div>
  <div class="grid-item green"></div>
  ...
</div>

В этом случае, элемент попадает под каждый из заданных ему фильтров.

Теперь в инициализации нужно прописать немного JavaScript кода. Я буду использовать синтаксис JS:

// Инициализая секции с которой работаем
let grid = new Isotope('.grid', {
    itemSelector: '.grid-item',
    layoutMode: 'fitRows'
});

// Работаем с кнопками фильтров
let filterBtn = document.querySelectorAll('.filters-button .filter-btn');
for (let i = 0; i < filterBtn.length; i++) {
    // Если кликнули по ссылке
    filterBtn[i].onclick = function (click) {
        // Отменяем переход
        click.preventDefault();
        // Получаем значение дата-атрибута кнопки
        let filterData = event.target.getAttribute('data-filter');
        // Применяем фильтрацию элементов в Isotope
        grid.arrange({
            filter: filterData
        });
    };
}

Совсем небольшой код, комментарии я на всякий случай прописал.

Опции

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

itemSelector

Определяет с какими элементами будет работать библиотека. Важно всегда указывать данную опцию, дабы исключить попадание других элементов в поток работы.

itemSelector: '.grid-item'

transitionDuration

Продолжительность перехода анимации, когда элементы меняют свое местоположение или внешний вид. Значение задается в формате времени CSS или в виде числа в миллисекундах. Значение по умолчанию: transitionDuration: '0.4s'.

// Быстрый переход анимации
transitionDuration: '0.2s'

// Медленный переход анимации
transitionDuration: '0.8s'

// Нет перехода анимации
transitionDuration: 0

// Значение перехода 0.4s в миллисекундах
transitionDuration: 400

Инструкция будет пополняться и обновляться со временем.

Благодарность автору

Если по какой-либо причине вы хотите поблагодарить автора данного ресурса, вы можете это сделать одним из удобных для вас способов ниже.

Один из самых популярных способов поблагодарить автора, воспользоваться сервисом Яндекс.Деньги.

Время работы: 0,5921 s
Время запросов: 0,5921 s
Количество запросов: 28
Источник: cache