Реинициализация при ресайзе

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

Обработка события ресайза

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

Для этого применяются стандартные события Jav * aScript:

window.addEventListener('resize', function() {
    iso.layout(); 
});
  • iso — это экземпляр Isotope, созданный с помощью конструктора new Isotope(...).
  • Метод layout() выполняет перерасчёт всех элементов сетки и корректно перестраивает их позиции.

Использование только layout() зачастую недостаточно, если изменяется количество колонок в сетке при адаптивной верстке. В таких случаях необходимо реинициализировать Isotope с новыми параметрами.

Реинициализация Isotope

При смене размеров окна иногда требуется полная перестройка сетки, особенно если изменились значения columnWidth или gutter.

Пример подхода с полной реинициализацией:

function initIsotope() {
    var grid = document.querySelector('.grid');
    return new Isotope(grid, {
        itemSelector: '.grid-item',
        layoutMode: 'masonry',
        masonry: {
            columnWidth: '.grid-sizer',
            gutter: 10
        }
    });
}

var iso = initIsotope();

window.addEventListener('resize', function() {
    iso.destroy();  // удаляет текущую сетку
    iso = initIsotope();  // создаёт сетку заново с актуальными параметрами
});

Пояснения к коду:

  • destroy() полностью удаляет экземпляр Isotope, включая все встроенные обработчики и стили.
  • Новый экземпляр пересоздаётся с учётом актуальной ширины контейнера и новых значений колонок.
  • Такой подход предотвращает ошибки при адаптивных сетках, где количество колонок зависит от ширины окна.

Оптимизация пересчёта при частых изменениях размеров

При быстром изменении размеров окна (например, при растягивании браузера пользователем) метод resize с реинициализацией может вызывать значительные нагрузки на производительность.

Для оптимизации используют debounce-функцию, которая ограничивает частоту вызова обработчика:

function debounce(func, wait) {
    let timeout;
    return function() {
        clearTimeout(timeout);
        timeout = setTimeout(func, wait);
    };
}

window.addEventListener('resize', debounce(function() {
    iso.destroy();
    iso = initIsotope();
}, 200));
  • debounce гарантирует, что реинициализация будет происходить не чаще одного раза в указанное время (200 мс), даже если событие resize срабатывает многократно.
  • Это особенно важно для сеток с большим количеством элементов, где частые перестройки могут приводить к лагам и падению производительности.

Изменение параметров Masonry при ресайзе

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

function updateMasonry() {
    var gridWidth = document.querySelector('.grid').offsetWidth;
    var columnWidth = gridWidth > 1200 ? 300 : 200;

    iso.destroy();
    iso = new Isotope('.grid', {
        itemSelector: '.grid-item',
        layoutMode: 'masonry',
        masonry: {
            columnWidth: columnWidth,
            gutter: 10
        }
    });
}

window.addEventListener('resize', debounce(updateMasonry, 150));
  • Динамический расчёт columnWidth позволяет сетке оставаться адаптивной без искажений.
  • Использование debounce предотвращает избыточные пересчёты при изменении размеров.

Рекомендации по реинициализации

  1. Минимизировать количество вызовов destroy() — лучше использовать layout() при незначительных изменениях размеров.
  2. Использовать debounce для событий resize.
  3. Пересоздавать сетку только при изменении критических параметров, таких как ширина колонок или режим сетки.
  4. Следить за производительностью на мобильных устройствах, где частая реинициализация может вызывать тормоза.
  5. Для динамических элементов (добавление/удаление элементов) использовать методы appended() и remove() вместо полной реинициализации, если возможно.

Реинициализация при ресайзе является ключевым инструментом для поддержания адаптивности и корректного отображения сетки в Isotope. Правильное применение методов layout(), destroy() и динамического пересчёта параметров Masonry позволяет создавать стабильные и производительные интерфейсы.

Оглавление