Параметры конструктора

Создание сетки в библиотеке Muuri начинается с вызова конструктора:

const grid = new Muuri(element, options);

Конструктор принимает два аргумента:

  1. element — контейнер сетки
  2. options — объект конфигурации

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

const grid = new Muuri('.grid', {
  items: '.grid-item'
});

Контейнером может выступать:

  • CSS-селектор
  • DOM-элемент
  • NodeList
  • массив элементов

Наиболее распространённый вариант — передача CSS-селектора.

const grid = new Muuri(document.querySelector('.grid'));

Основные параметры конструктора

items

Определяет, какие элементы внутри контейнера будут рассматриваться как элементы сетки.

const grid = new Muuri('.grid', {
  items: '.item'
});

Если параметр не указан, Muuri будет использовать все дочерние элементы контейнера.

Возможные значения:

  • CSS-селектор
  • DOM-элемент
  • массив элементов
  • NodeList

Пример передачи массива элементов:

const items = document.querySelectorAll('.item');

const grid = new Muuri('.grid', {
  items: items
});

showDuration

Определяет длительность анимации появления элементов.

const grid = new Muuri('.grid', {
  showDuration: 300
});

Значение указывается в миллисекундах.

По умолчанию:

showDuration: 300

При установке значения 0 анимация отключается.

showDuration: 0

showEasing

Определяет функцию плавности (easing) для анимации появления элементов.

const grid = new Muuri('.grid', {
  showEasing: 'ease'
});

Поддерживаются любые CSS-функции easing:

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier(...)

Пример кастомной функции:

showEasing: 'cubic-bezier(0.215, 0.61, 0.355, 1)'

hideDuration

Задаёт длительность анимации скрытия элементов.

const grid = new Muuri('.grid', {
  hideDuration: 300
});

Значение задаётся в миллисекундах.

По умолчанию:

hideDuration: 300

Отключение анимации:

hideDuration: 0

hideEasing

Определяет easing-функцию для анимации скрытия.

const grid = new Muuri('.grid', {
  hideEasing: 'ease'
});

Пример более плавной анимации:

hideEasing: 'ease-in'

Параметры позиционирования

layout

Параметр layout управляет алгоритмом расчёта расположения элементов.

const grid = new Muuri('.grid', {
  layout: {
    fillGaps: false
  }
});

Возможные свойства:

fillGaps

Позволяет заполнять пустые области между элементами.

layout: {
  fillGaps: true
}

Полезно при работе с элементами разных размеров.

horizontal

Переключает направление построения сетки.

По умолчанию используется вертикальный поток.

layout: {
  horizontal: true
}

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

alignRight

Выравнивание сетки по правому краю.

layout: {
  alignRight: true
}

alignBottom

Выравнивание элементов по нижней границе.

layout: {
  alignBottom: true
}

rounding

Определяет округление координат при позиционировании.

layout: {
  rounding: true
}

Используется для устранения субпиксельных артефактов.

Параметры анимации расположения

layoutDuration

Длительность анимации перемещения элементов при изменении layout.

const grid = new Muuri('.grid', {
  layoutDuration: 300
});

По умолчанию:

layoutDuration: 300

Отключение:

layoutDuration: 0

layoutEasing

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

layoutEasing: 'ease'

Пример более мягкой анимации:

layoutEasing: 'cubic-bezier(0.215, 0.61, 0.355, 1)'

Параметры видимости элементов

visibleStyles

Определяет CSS-стили, применяемые к видимым элементам.

const grid = new Muuri('.grid', {
  visibleStyles: {
    opacity: '1',
    transform: 'scale(1)'
  }
});

По умолчанию:

visibleStyles: {
  opacity: '1',
  transform: 'scale(1)'
}

hiddenStyles

Определяет стили для скрытых элементов.

const grid = new Muuri('.grid', {
  hiddenStyles: {
    opacity: '0',
    transform: 'scale(0.5)'
  }
});

Пример эффекта уменьшения:

hiddenStyles: {
  opacity: '0',
  transform: 'scale(0.2)'
}

Параметры перетаскивания

dragEnabled

Включает возможность перетаскивания элементов.

const grid = new Muuri('.grid', {
  dragEnabled: true
});

По умолчанию:

dragEnabled: false

После включения элементы можно перемещать внутри сетки.

dragHandle

Определяет элемент, за который разрешено перетаскивание.

const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragHandle: '.drag-handle'
});

HTML-пример:

<div class="item">
  <div class="drag-handle">≡</div>
</div>

dragAxis

Ограничивает направление перетаскивания.

Возможные значения:

  • x
  • y
  • xy
dragAxis: 'y'

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

dragSort

Определяет возможность изменения порядка элементов при перетаскивании.

dragSort: true

По умолчанию включено.

Можно также указать функцию:

dragSort: function () {
  return [grid];
}

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

dragSortInterval

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

dragSortInterval: 50

Значение указывается в миллисекундах.

dragContainer

Контейнер, в котором будет находиться элемент во время перетаскивания.

const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragContainer: document.body
});

Это позволяет избежать проблем с overflow: hidden.

dragReleaseDuration

Длительность анимации после отпускания элемента.

dragReleaseDuration: 300

dragReleaseEasing

Функция плавности для анимации возврата элемента.

dragReleaseEasing: 'ease'

Параметры сортировки

sortData

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

const grid = new Muuri('.grid', {
  sortData: {
    title: function (item, element) {
      return element.getAttribute('data-title');
    }
  }
});

Пример HTML:

<div class="item" data-title="B"></div>
<div class="item" data-title="A"></div>

Сортировка:

grid.sort('title');

Можно объявить несколько критериев:

sortData: {
  title: (item, element) => element.dataset.title,
  price: (item, element) => Number(element.dataset.price)
}

Параметры автоматического обновления

layoutOnResize

Определяет, будет ли сетка пересчитываться при изменении размера окна.

layoutOnResize: true

По умолчанию используется задержка:

layoutOnResize: 150

Значение — это debounce-таймер.

Отключение:

layoutOnResize: false

layoutOnInit

Определяет, должен ли layout выполняться при инициализации.

layoutOnInit: true

Отключение:

layoutOnInit: false

Это полезно, если необходимо сначала выполнить дополнительные операции.

Дополнительные параметры

containerClass

CSS-класс контейнера сетки.

containerClass: 'muuri'

Позволяет изменить стандартный класс.

itemClass

Класс элемента сетки.

itemClass: 'muuri-item'

itemVisibleClass

Класс для отображаемых элементов.

itemVisibleClass: 'muuri-item-shown'

itemHiddenClass

Класс скрытого элемента.

itemHiddenClass: 'muuri-item-hidden'

itemPositioningClass

Класс, который применяется во время анимации позиционирования.

itemPositioningClass: 'muuri-item-positioning'

Этот класс используется для управления CSS-анимациями и оптимизации производительности.

Пример полной конфигурации конструктора

const grid = new Muuri('.grid', {

  items: '.item',

  showDuration: 300,
  hideDuration: 300,

  layoutDuration: 400,
  layoutEasing: 'ease',

  dragEnabled: true,
  dragAxis: 'xy',

  layout: {
    fillGaps: true,
    rounding: true
  },

  visibleStyles: {
    opacity: '1',
    transform: 'scale(1)'
  },

  hiddenStyles: {
    opacity: '0',
    transform: 'scale(0.5)'
  }

});

Такая конфигурация создаёт сетку с поддержкой:

  • анимации
  • динамического позиционирования
  • перетаскивания элементов
  • автоматического заполнения пустых областей
  • плавного появления и скрытия элементов.
Оглавление