destroy

Метод destroy используется для полного отключения экземпляра Masonry и возврата DOM-структуры в состояние, максимально приближенное к исходному. После вызова этого метода библиотека прекращает управление раскладкой элементов, удаляет созданные обработчики событий и очищает служебные стили.

В рамках жизненного цикла Masonry destroy выполняет роль финальной стадии работы экземпляра. Этот метод необходим в ситуациях, когда динамический интерфейс больше не требует masonry-раскладки или когда требуется повторная инициализация библиотеки.

Назначение метода

При инициализации Masonry библиотека:

рассчитывает позиции элементов
устанавливает inline-стили
создаёт обработчики событий
сохраняет служебные данные экземпляра

Метод destroy выполняет обратную операцию:

удаляет служебные данные Masonry
очищает inline-позиционирование элементов
снимает обработчики событий
возвращает контейнер и элементы к стандартному поведению браузера

Это позволяет избежать утечек памяти и конфликтов при повторной инициализации.

Синтаксис

msnry.destroy();

где msnry — экземпляр Masonry.

Базовый пример использования

var grid = document.querySelector('.grid');

var msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10
});

// уничтожение экземпляра Masonry
msnry.destroy();

После выполнения:

Masonry перестает управлять сеткой
элементы возвращаются к обычному потоку документа
стили позиционирования удаляются

Изменения в DOM после уничтожения

После вызова destroy происходят следующие изменения.

Очистка inline-стилей элементов

Masonry управляет позиционированием элементов через стили:

position: absolute;
left: ...
top: ...

Метод destroy удаляет эти стили.

Пример до уничтожения:

<div class="grid-item" style="position:absolute; left:0px; top:200px;"></div>

После вызова:

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

Элементы снова подчиняются стандартному CSS.

Сброс стилей контейнера

Контейнер Masonry также получает служебные стили, например:

position: relative;
height: ...

destroy очищает эти значения.

Удаление внутренних данных Masonry

Masonry сохраняет внутренние данные через систему хранения:

element.masonryGUID

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

Удаление обработчиков событий

В процессе работы Masonry регистрирует несколько обработчиков:

resize
layoutComplete
removeComplete
appendComplete

Метод destroy снимает все зарегистрированные обработчики, предотвращая:

лишние перерасчёты
утечки памяти
ошибки при удалённых DOM-элементах

Поведение элементов после destroy

После уничтожения Masonry:

элементы располагаются в обычном потоке
CSS float, flex или grid снова начинают работать
управление расположением возвращается стилям страницы

Пример.

До destroy

absolute positioning
computed layout by Masonry

После destroy

standard block flow

Повторная инициализация Masonry

После вызова destroy возможно повторное создание экземпляра Masonry.

msnry.destroy();

msnry = new Masonry('.grid', {
  itemSelector: '.grid-item',
  columnWidth: 200
});

Это используется при:

изменении конфигурации
переключении режимов интерфейса
загрузке новой разметки

Использование в адаптивных интерфейсах

destroy часто применяется при адаптивной верстке.

Некоторые интерфейсы используют Masonry только на больших экранах.

var msnry;

function checkLayout() {
  if (window.innerWidth > 900) {

    if (!msnry) {
      msnry = new Masonry('.grid', {
        itemSelector: '.grid-item',
        columnWidth: 250
      });
    }

  } else {

    if (msnry) {
      msnry.destroy();
      msnry = null;
    }

  }
}

window.addEventListener('resize', checkLayout);
checkLayout();

В этом сценарии:

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

Использование при смене макета

Интерфейсы часто переключают режимы отображения:

masonry
grid
list

Метод destroy позволяет отключить masonry-раскладку перед переключением.

function showListView() {
  msnry.destroy();
  document.body.classList.add('list-view');
}

function showGridView() {
  msnry = new Masonry('.grid', {
    itemSelector: '.grid-item'
  });
}

Работа с динамическими SPA-приложениями

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

Без destroy возможны:

дублирование обработчиков
повторные пересчёты layout
ошибки при удалённых DOM-узлах

Пример.

function leavePage() {
  if (msnry) {
    msnry.destroy();
  }
}

Использование вместе с удалением элементов

Если контейнер Masonry удаляется из DOM, предварительно рекомендуется вызвать destroy.

msnry.destroy();
grid.remove();

Это предотвращает обращения библиотеки к несуществующим элементам.

Внутренний механизм работы destroy

Метод выполняет несколько этапов.

1. Удаление стилей элементов

Каждый элемент Masonry содержит:

item.element.style.position
item.element.style.left
item.element.style.top

destroy очищает эти свойства.

2. Очистка стилей контейнера

Контейнер сбрасывает:

height
position

3. Удаление данных экземпляра

Masonry хранит данные через систему Outlayer. Метод удаляет связь между DOM-элементом и экземпляром.

4. Снятие событий

Удаляются слушатели:

resize
transitionend

Отличие destroy от remove

Методы выполняют разные задачи.

destroy

отключает Masonry
не удаляет элементы
возвращает обычную верстку

remove

удаляет элементы из layout
Masonry продолжает работать

Пример.

msnry.remove(itemElements);
msnry.layout();

Отличие destroy от reloadItems

reloadItems пересчитывает элементы Masonry.

destroy → полностью отключает библиотеку
reloadItems → обновляет список элементов

Проверка существования экземпляра

Перед вызовом destroy часто проверяется наличие экземпляра.

if (msnry) {
  msnry.destroy();
}

Это предотвращает ошибки:

Cannot read property 'destroy' of undefined

Распространённые ошибки

Повторный destroy

msnry.destroy();
msnry.destroy();

Если переменная не очищена, возможны ошибки.

Правильный вариант:

msnry.destroy();
msnry = null;

Destroy без удаления ссылок

Иногда экземпляр уничтожается, но ссылка остаётся.

Это может привести к повторному использованию несуществующего объекта.

Уничтожение без снятия собственных событий

Если разработчик добавлял собственные события Masonry:

msnry.on('layoutComplete', handler);

их также следует удалить.

Практический сценарий: переключение галереи

Пример интерфейса галереи с двумя режимами.

var msnry;

function enableMasonry() {

  msnry = new Masonry('.gallery', {
    itemSelector: '.item',
    columnWidth: 200,
    gutter: 10
  });

}

function disableMasonry() {

  if (msnry) {
    msnry.destroy();
    msnry = null;
  }

}

Практический сценарий: пересоздание layout

Иногда требуется изменить конфигурацию Masonry.

function rebuildLayout(options) {

  if (msnry) {
    msnry.destroy();
  }

  msnry = new Masonry('.grid', options);

}

Производительность

destroy выполняется быстро, поскольку:

удаляет только inline-стили
снимает обработчики
не выполняет перерасчёт layout

Тем не менее при большом количестве элементов (1000+) очистка стилей может занимать заметное время.

Когда необходимо использовать destroy

Основные случаи применения:

1. Удаление Masonry из интерфейса

Когда layout больше не нужен.

2. Смена режима отображения

Переключение между grid / list / masonry.

3. Изменение конфигурации

Перед повторной инициализацией.

4. Удаление страницы в SPA

Освобождение памяти и обработчиков.

5. Перестройка DOM

Когда контейнер полностью заменяется.

Ключевые свойства метода

Свойство	Описание
Тип	метод экземпляра
Аргументы	отсутствуют
Возвращаемое значение	`undefined`
Назначение	уничтожение экземпляра Masonry
Побочный эффект	очистка DOM-стилей и событий

Связанные методы Masonry

Метод destroy используется вместе с другими методами жизненного цикла:

layout
reloadItems
appended
remove

Они управляют активной работой Masonry, тогда как destroy полностью завершает её.