Доска объявлений

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

Пример подключения через CDN:

Если проект предполагает локальную сборку с помощью модульных систем (например, Webpack или Vite), Isotope можно установить через npm:

npm install isotope-layout

И импортировать в коде:

import Isotope from 'isotope-layout';

Основная структура доски объявлений

Доска объявлений в Isotope состоит из контейнера и элементов внутри него. Контейнер служит оберткой для карточек объявлений, а каждый элемент — отдельная карточка.


  
Новость 1

  
Событие 1

  
Акция 1

Рекомендации по структуре:

  • Контейнер (.grid) должен содержать все элементы.
  • Элементы (.grid-item) должны иметь классы, которые могут использоваться для фильтрации.
  • Можно добавлять дополнительные данные через атрибуты data-*, чтобы позже использовать их для сортировки.

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

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

const grid = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  percentPosition: true,
  masonry: {
    columnWidth: '.grid-item'
  }
});

Ключевые параметры:

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

Фильтрация карточек объявлений

Isotope позволяет динамически фильтровать элементы по классу или по любым атрибутам. Фильтры применяются методом arrange.

// Показать только новости
grid.arrange({ filter: '.category-news' });

// Показать события и акции
grid.arrange({ filter: '.category-event, .category-sale' });

// Показать все
grid.arrange({ filter: '*' });

Применение через кнопки:

Сортировка объявлений

Для упорядочивания карточек можно использовать метод arrange с опцией sortBy. Для сортировки необходимо задать свойства через getSortData.

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

// Сортировка по дате
grid.arrange({ sortBy: 'date', sortAscending: false });

// Сортировка по названию
grid.arrange({ sortBy: 'name', sortAscending: true });

Советы по сортировке:

  • Для числовых значений использовать функцию парсинга parseInt или parseFloat.
  • Для строк можно использовать локализованное сравнение localeCompare для правильной сортировки кириллицы.

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

Isotope поддерживает анимацию изменения позиций элементов при фильтрации и сортировке. Настройка анимации производится через CSS и опцию transitionDuration.

const grid = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  transitionDuration: '0.4s'
});

Пример CSS для плавного эффекта:

.grid-item {
  transition: transform 0.4s, opacity 0.4s;
}

Динамическое добавление и удаление карточек

Isotope позволяет добавлять новые элементы без пересоздания всей сетки. Используются методы appended и remove.

// Создание нового элемента
const newItem = document.createElement('div');
newItem.className = 'grid-item category-news';
newItem.textContent = 'Новость 2';

// Добавление в контейнер
grid.appended(newItem);

Удаление:

const itemToRemove = document.querySelector('.grid-item.category-sale');
grid.remove(itemToRemove);
grid.layout();

Особенности:

  • После удаления рекомендуется вызвать grid.layout(), чтобы пересчитать расположение элементов.
  • Можно одновременно добавлять несколько элементов, передавая массив элементов в appended.

Работа с адаптивной версткой

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

  • Использовать percentPosition: true.
  • Настроить ширину элементов через CSS в процентах.
  • При изменении размера окна вызывать метод layout для перерасчета:
window.addEventListener('resize', () => grid.layout());

Интеграция с внешними данными

Для досок объявлений часто требуется загрузка данных из API. Можно создавать карточки динамически и сразу добавлять их в Isotope.

fetch('/api/announcements')
  .then(response => response.json())
  .then(data => {
    const elements = data.map(item => {
      const div = document.createElement('div');
      div.className = `grid-item category-${item.type}`;
      div.textContent = item.title;
      return div;
    });
    elements.forEach(el => document.querySelector('.grid').appendChild(el));
    grid.appended(elements);
  });

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

Оглавление