Erstellen Sie responsive sortierbare Rasterlayouts mit diesem Skript
Kundenspezifische Raster sind einige der schwierigsten Funktionen, die von Grund auf neu erstellt werden müssen. Es gibt viele Plug-ins für Mauerwerkraster, aber sie Jeder hat seine eigenen Einschränkungen und Anforderungen.
Das Muuri-Skript ist eine starke Alternative für alle, die es brauchen sortierbare und responsive Rasterelemente mit Touch-Unterstützung.
Es ist gebaut auf Velocity.js für die Animationen, zusammen mit Hammer.js-Bibliothek zur Handhabung von mobilem Touch. Muuri nicht erfordern jQuery, Es ist also eines der wenigen Vanilla-JavaScript-Plugins für Grid-Schnittstellen.
Auf der Hauptprojektseite finden Sie eine schöne Grid-Demo mit allen Funktionen. Animationseffekte, Drag & Drop-Unterstützung und verschiedene Rasterelemente unterschiedlicher Größe. Diese Demo zeigt, wie viel Kontrolle Sie mit einem Muuri-Raster haben.
Du kannst wählen welche Elemente angezeigt werden, basierend auf Klassen (d. h. Filtern) zusammen mit wie Sie leere Felder ausfüllen möchten.
Mauersteine hinterlassen oft leere Stellen, weil die Rasterelemente passen nicht immer perfekt zusammen. Dies ist ziemlich typisch für größere Websites wie Pinterest. Obwohl Sie es können ziehbare Gitterelemente hinzufügen zu so ziemlich jeder benutzergesteuerten Schnittstelle.
Nachdenken über Soziale Profile mit Widget-Layouts und wie sie arbeiten würden. Oder darüber nachdenken benutzerdefinierte Aufgabenlisten, die als progressive Web-Apps ausgeführt werden auf JavaScript. Es gibt auf der Muuri-Seite eine großartige Demo, die eine Beispiel-To-Do-Liste zeigt und wie sie als PWA auf dem Handy funktionieren kann.
Um zu beginnen, musst du nur Alle JavaScript-Abhängigkeiten sowie die Muuri-Skripte enthalten. Sie können sie durch npm herunterziehen oder eine Kopie aus dem GitHub-Repo holen.
Dann Sie Erstellen Sie ein Container-Rasterelement und Ziel mit einer neuen Instanz des Muuri () Methode. Es ist alles ziemlich einfach und besonders einfach zu bedienen, indem die Code-Snippets aus dem GitHub-Repo kopiert werden.
Mit volle Unterstützung für alle modernen Browser (IE9 +) und eine touchfähige Oberfläche, Dieses Plugin ist eines der besten für Drag & Drop-Rasterfunktionen.
Erfahren Sie mehr, indem Sie die Muuri-Homepage durchlesen und an den Live-Demos basteln. Das ist ein tolles System für dynamische Netze und sein noch in aktiver Entwicklung, Sie können also darauf vertrauen, dass dieses Plugin auf lange Sicht verfügbar ist.
