Портфолио с фильтрацией

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

Инициализация сетки

Сначала необходимо подключить библиотеку и создать контейнер для элементов портфолио:

<div class="grid">
  <div class="item" data-category="web">Проект 1</div>
  <div class="item" data-category="mobile">Проект 2</div>
  <div class="item" data-category="design">Проект 3</div>
  <div class="item" data-category="web">Проект 4</div>
</div>

В JavaScript сетка создаётся так:

const grid = new Muuri('.grid', {
  items: '.item',
  layout: {
    rounding: false
  },
  dragEnabled: false
});
  • items — CSS-селектор для элементов сетки.
  • layout.rounding — отключает округление координат, что делает анимацию более плавной.
  • dragEnabled — отключает возможность перетаскивания, если она не нужна.

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

Фильтрация позволяет показывать только те элементы, которые соответствуют выбранной категории. Для этого используется метод filter:

function filterGrid(category) {
  grid.filter(item => {
    if (category === 'all') return true;
    return item.getElement().dataset.category === category;
  });
}
  • item.getElement() возвращает DOM-элемент, связанный с объектом Muuri.
  • dataset.category извлекает значение категории, заданное в HTML.
  • 'all' используется для сброса фильтрации и отображения всех элементов.

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

const buttons = document.querySelectorAll('.filter-button');

buttons.forEach(button => {
  button.addEventListener('click', () => {
    const category = button.dataset.filter;
    filterGrid(category);
  });
});

Анимация и плавное расположение

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

const grid = new Muuri('.grid', {
  layout: {
    duration: 400,
    easing: 'ease'
  }
});
  • duration — длительность анимации в миллисекундах.
  • easing — функция сглаживания анимации.

Эти параметры делают фильтрацию визуально привлекательной и плавной.

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

Сортировка элементов по различным критериям также легко интегрируется. Например, по алфавиту:

grid.sort((a, b) => {
  const textA = a.getElement().textContent.toLowerCase();
  const textB = b.getElement().textContent.toLowerCase();
  return textA.localeCompare(textB);
});

Muuri поддерживает разные стратегии сортировки, включая числовую, текстовую или пользовательскую.

Комбинирование фильтрации и сортировки

Можно создавать интерфейс, где сначала фильтруются элементы, а затем они сортируются:

filterGrid('web'); // показываем только веб-проекты
grid.sort((a, b) => a.getElement().textContent.length - b.getElement().textContent.length);

Muuri корректно обновляет позиционирование элементов при изменении фильтра или сортировки.

Обновление сетки при динамическом добавлении элементов

Если новые элементы добавляются после инициализации сетки, их необходимо добавить в объект Muuri и пересчитать расположение:

const newItem = document.createElement('div');
newItem.classList.add('item');
newItem.dataset.category = 'design';
newItem.textContent = 'Проект 5';
document.querySelector('.grid').appendChild(newItem);

grid.add(newItem);
grid.layout();

Метод add добавляет элементы, а layout пересчитывает их расположение.

Управление видимостью элементов без удаления

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

grid.filter(item => {
  const category = item.getElement().dataset.category;
  return category === 'mobile';
}, { layout: { duration: 300 } });

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

Адаптивная сетка и responsive

Muuri автоматически поддерживает изменение размеров контейнера. При изменении ширины окна элементы плавно перестраиваются. Для оптимизации работы на мобильных устройствах рекомендуется:

window.addEventListener('resize', () => grid.refreshItems().layout());
  • refreshItems() обновляет размеры элементов.
  • layout() перерассчитывает расположение.

Настройка внешнего вида и стилей

Каждый элемент сетки можно стилизовать с помощью CSS, включая тени, отступы, анимации при наведении:

.grid {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 200px;
  height: 150px;
  margin: 10px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease;
}

Эти стили позволяют сетке выглядеть современно и аккуратно при фильтрации.

Итоговая структура проекта

  • HTML: контейнер .grid с элементами .item, каждая карточка с data-category.
  • CSS: базовые стили для сетки и элементов, анимации.
  • JS: инициализация Muuri, фильтрация, сортировка, добавление новых элементов и обновление layout.

Эта структура обеспечивает гибкий и динамичный интерфейс портфолио с фильтрацией и плавной анимацией.

Оглавление