Галерея изображений с фильтрацией

Isotope — это мощная библиотека для организации и фильтрации элементов на веб-странице. Она позволяет динамически изменять расположение карточек, блоков или изображений в сетке, обеспечивая плавные анимации при фильтрации и сортировке. Основной подход заключается в работе с контейнером, содержащим элементы, каждому из которых присваиваются определённые классы или атрибуты, используемые для фильтрации.

Контейнер и элементы Контейнер — это блок, внутри которого располагаются элементы галереи. Элементы могут быть <div>, <li> или любыми блочными элементами. Каждый элемент получает класс категории, например:

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

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

Для начала работы создаётся экземпляр Isotope:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item', // элементы внутри контейнера
  layoutMode: 'masonry',      // тип расположения: masonry, fitRows, vertical
  percentPosition: true,      // использование процентов для адаптивного расположения
  masonry: {
    gutter: 10                // отступ между элементами
  }
});

Параметры:

  • itemSelector — селектор для элементов, которыми управляет Isotope.
  • layoutMode — режим расположения элементов.
  • percentPosition — позволяет элементам адаптироваться под разные размеры контейнера.
  • masonry.gutter — задаёт промежуток между элементами.

Фильтрация элементов

Фильтрация выполняется через метод .arrange() с параметром filter:

iso.arrange({ filter: '.nature' });

Это отобразит только элементы с классом nature. Можно также комбинировать фильтры с CSS-селекторами:

iso.arrange({ filter: '.nature, .architecture' });

Динамическая фильтрация с кнопками:

<div class="filters">
  <button data-filter="*">Все</button>
  <button data-filter=".nature">Природа</button>
  <button data-filter=".architecture">Архитектура</button>
</div>
var filtersElem = document.querySelector('.filters');
filtersElem.addEventListener('click', function(event) {
  if (!matchesSelector(event.target, 'button')) return;
  var filterValue = event.target.getAttribute('data-filter');
  iso.arrange({ filter: filterValue });
});

Сортировка элементов

Isotope позволяет сортировать элементы по атрибутам, тексту или пользовательской функции. Для этого используется параметр getSortData:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  getSortData: {
    name: '.name',       // сортировка по тексту внутри элемента с классом .name
    date: '[data-date]'  // сортировка по значению атрибута data-date
  }
});

Сортировка применяется через метод arrange:

iso.arrange({ sortBy: 'date' });

Для динамической сортировки с кнопками используется аналогичная фильтрации логика:

<div class="sort-buttons">
  <button data-sort-by="name">По имени</button>
  <button data-sort-by="date">По дате</button>
</div>
var sortButtons = document.querySelector('.sort-buttons');
sortButtons.addEventListener('click', function(event) {
  if (!matchesSelector(event.target, 'button')) return;
  var sortValue = event.target.getAttribute('data-sort-by');
  iso.arrange({ sortBy: sortValue });
});

Анимация и переходы

Isotope использует CSS-переходы для плавной анимации элементов при фильтрации и сортировке. Важные моменты:

  • Элементы должны иметь transition в CSS для свойств transform и opacity.
  • Контейнеру не требуется дополнительная настройка анимации — все действия выполняются библиотекой автоматически.
  • Можно управлять длительностью анимации через параметр transitionDuration:
var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  transitionDuration: '0.6s'
});

Работа с изображениями

Для корректной работы галереи с изображениями рекомендуется использовать библиотеку imagesLoaded, чтобы Isotope запускался только после полной загрузки изображений:

imagesLoaded('.grid', function() {
  iso.layout();
});

Это предотвращает неправильное позиционирование элементов при асинхронной загрузке картинок.

Адаптивность и респонсив

Isotope автоматически адаптирует расположение элементов под ширину контейнера, если используется percentPosition: true. Для более точной настройки можно комбинировать с медиазапросами CSS:

.grid-item {
  width: 48%; /* два элемента в ряд */
}

@media (max-width: 768px) {
  .grid-item {
    width: 100%; /* один элемент в ряд на мобильных */
  }
}

Продвинутые техники

Комбинированная фильтрация и сортировка: можно одновременно применять фильтры и сортировку:

iso.arrange({
  filter: '.nature',
  sortBy: 'date'
});

Фильтры по сложным условиям: можно использовать функции вместо строковых селекторов:

iso.arrange({
  filter: function(itemElem) {
    var date = itemElem.getAttribute('data-date');
    return parseInt(date, 10) > 2020;
  }
});

Интерактивные интерфейсы: с помощью Isotope легко создавать вкладки, переключатели и динамические галереи, где пользователи могут выбирать категории, изменять порядок и наблюдать за плавной анимацией.

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

Оглавление