Создание адаптивных макетов сортируемой сетки с помощью этого сценария

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

Мури сценарий это сильная альтернатива для тех, кто нуждается сортируемые и гибкие элементы сетки с поддержкой касания.

Он построен на Velocity.js для анимации, вместе с Библиотека Hammer.js для управления мобильным касанием. Muuri не требовать JQuery, так что это один из немногих ванильных плагинов JavaScript для сеточных интерфейсов.

На главной странице проекта вы найдете красивая сетка демо со всеми функциями. Анимационные эффекты, поддержка перетаскивания и различные элементы сетки разных размеров. Эта демонстрация демонстрирует, насколько вы контролируете с помощью сетки Муури.

Ты можешь выбрать какие элементы отображать, основанный на классах (то есть фильтрации), наряду с как вы хотите заполнить пустые места.

Кирпичные сетки часто оставляют пустые места, потому что элементы сетки не всегда идеально сочетаются друг с другом. Это довольно типично для крупных сайтов, таких как Pinterest. Хотя вы можете добавить перетаскиваемые элементы сетки практически любой пользовательский интерфейс.

Подумать о социальные профили с виджетами и как они будут работать. Или подумай настраиваемые списки дел, выполняемые как прогрессивные веб-приложения на JavaScript. На странице Muuri есть отличная демонстрация этого, демонстрирующая пример списка дел и то, как он может работать как PWA на мобильных устройствах..

Чтобы начать, вы просто включить все зависимости JavaScript, а также скрипты Muuri. Вы можете потянуть их через npm или получить копию из репозитория GitHub..

Затем вы создать элемент сетки контейнера а также цель, с новым экземпляром Muuri () метод. Это все довольно просто и особенно легко использовать, копируя фрагменты кода из репозитория GitHub.

С полная поддержка всех современных браузеров (IE9 +) и сенсорный интерфейс, этот плагин является одним из лучших для перетаскивания сетки.

Узнайте больше, прочитав домашнюю страницу Muuri и поигравшись с живыми демонстрациями. Это отличная система для динамических сеток И его все еще в активной разработке, так что вы можете доверять этому плагину..