Создание адаптивных макетов сортируемой сетки с Muuri

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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

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

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

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

Читайте также: Grid.css – минимальная грид-система для веб-разработчиков

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

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

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

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

Читайте также: Простое создание современных макетов с помощью Gridlex CSS Grid System