Побудуйте адаптивні макети сортування за допомогою цього сценарію

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

The Сценарій Muuri є сильною альтернативою для тих, хто потребує сортуються і чутливі елементи сітки з підтримкою дотику.

Він побудований на Velocity.js для анімації, разом з Бібліотека Hammer.js для обробки мобільного дотику. Muuri не потрібно jQuery, так що це один з небагатьох плагінів для вагінальних JavaScript для мережевих інтерфейсів.

На головній сторінці проекту ви знайдете a красива сітка демо з усіма функціями. Анімаційні ефекти, підтримка перетягування та витягання та різні елементи сітки різного розміру. Ця демонстрація демонструє, наскільки велика кількість керування ви маєте з сіткою Muuri.

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

Кладки сітки часто залишають порожні плями, тому що елементи сітки не завжди ідеально поєднуються. Це досить типово для великих веб-сайтів, таких як Pinterest. Хоча, можна додайте елементи перетягування сітки до будь-якого інтерфейсу, керованого користувачем.

Думай про соціальні профілі з віджетами і як вони будуть працювати. Або подумайте спеціальні списки завдань, які виконуються як прогресивні веб-програми на JavaScript. На сторінці Muuri насправді є чудова демонстрація цього прикладу, а також те, як вона може працювати як PWA на мобільному пристрої.

Щоб почати, ви просто включають всі залежності JavaScript від сценаріїв Muuri. Ви можете витягти їх через npm або схопити копію з GitHub repo.

Тоді ти створити елемент сітки контейнера і націлювати на новий екземпляр Muuri () метод. Все це досить просто і особливо легко використовувати, копіюючи фрагменти коду з GipHub repo.

С повна підтримка всіх сучасних браузерів (IE9 +) та інтерфейсу з підтримкою дотику, цей плагін є одним з кращих для функцій перетягування та скидання.

Дізнайтеся більше, прочитавши на домашній сторінці Muuri та переглядаючи живі демонстрації. Це відмінна система для динамічних сіток і це все ще в активному розвитку, так що ви можете довіряти, що цей плагін буде довгий час.