Erstellen Sie Responsive Sortable Grid Layouts mit diesem Skript

Benutzerdefinierte Raster sind einige der schwierigsten Features, die Sie von Grund auf neu erstellen können. Sie können viele Mauergitter-Plugins finden, aber sie haben jeweils ihre eigenen Einschränkungen und Anforderungen .

Das Muuri-Skript ist eine starke Alternative für alle, die sortierbare und ansprechende Rasterelemente mit Touch-Unterstützung benötigen.

Es basiert auf Velocity.js für die Animationen, zusammen mit der Hammer.js-Bibliothek für den Umgang mit mobilen Touch . Muuri benötigt jQuery nicht, also ist es eines der wenigen JavaScript-Plugins für Raster-Interfaces.

Auf der Hauptprojektseite finden Sie eine schöne Rasterdemo mit allen Funktionen . Animationseffekte, Drag & Drop-Unterstützung und verschiedene Rasterelemente unterschiedlicher Größe. Diese Demo zeigt, wie viel Kontrolle Sie mit einem Muuri-Gitter haben.

Sie können auswählen, welche Elemente basierend auf Klassen (z. B. Filtern) angezeigt werden sollen und wie Sie leere Leerzeichen ausfüllen möchten .

Mauergitter hinterlassen oft leere Stellen, weil die Gitterelemente nicht immer perfekt zusammenpassen . Das ist typisch für größere Websites wie Pinterest. Sie können jedoch zu fast jeder benutzergesteuerten Oberfläche ziehbare Rasterelemente hinzufügen .

Denken Sie an soziale Profile mit Widget-Layouts und wie sie funktionieren würden. Oder denken Sie an benutzerdefinierte To-Do-Listen, die als progressive Web-Apps für JavaScript ausgeführt werden. Es gibt tatsächlich eine großartige Demo davon auf der Muuri-Seite mit einer Beispiel-To-Do-Liste und wie es als PWA auf dem Handy funktionieren könnte.

Um zu beginnen, fügen Sie einfach alle JavaScript-Abhängigkeiten zusammen mit den Muuri-Skripten ein . Sie können sie durch npm nach unten ziehen oder eine Kopie aus dem GitHub Repo holen.

Anschließend erstellen Sie ein Containerrasterelement und richten dieses mit einer neuen Instanz der Muuri() -Methode ein . Es ist alles ziemlich einfach und besonders einfach zu benutzen, indem man die Codeschnipsel aus dem GitHub Repo kopiert.

Mit voller Unterstützung aller modernen Browser (IE9 +) und einer touch-fähigen Schnittstelle ist dieses Plugin eines der besten für Drag & Drop-Grid-Funktionen.

Erfahren Sie mehr über die Muuri-Homepage und basteln Sie an den Live-Demos. Dies ist ein großartiges System für dynamische Grids und es ist noch in der aktiven Entwicklung, so dass Sie darauf vertrauen können, dass dieses Plugin auf lange Sicht verfügbar sein wird.