Costruire layout di griglia ordinabili reattivi con questo script

Griglie personalizzate sono alcune delle caratteristiche più difficili da creare da zero. Puoi trovare molti plugin per la griglia in muratura, ma loro ognuno ha i propri limiti e requisiti.

Il Script Muuri è una valida alternativa per chiunque ne abbia bisogno elementi di griglia ordinabili e reattivi con supporto touch.

È costruito su Velocity.js per le animazioni, insieme con il Libreria Hammer.js per la gestione del tocco mobile. Muuri non richiede jQuery, quindi è uno dei pochi plug-in vanilla JavaScript per interfacce di rete.

Nella pagina principale del progetto, troverai a bella demo della griglia con tutte le funzionalità. Effetti di animazione, supporto drag & drop e diversi elementi della griglia di varie dimensioni. Questa demo mostra quanto controllo hai con una griglia Muuri.

Puoi scegliere quali elementi mostrare, basato su classi (cioè filtraggio), insieme a come vuoi riempire gli spazi vuoti.

Le griglie in muratura spesso lasciano punti vuoti perché il gli elementi della griglia non sempre si adattano perfettamente. Questo è abbastanza tipico per i siti web più grandi come Pinterest. Anche se puoi aggiungi elementi di griglia trascinabili praticamente a qualsiasi interfaccia controllata dall'utente.

Pensa a profili social con layout widgetizzati e come avrebbero funzionato. Oppure, pensa liste di cose da fare personalizzate che funzionano come app web progressive su JavaScript. C'è in realtà una grande dimostrazione di questo nella pagina di Muuri che mostra una lista di cose da fare e come potrebbe funzionare come un PWA sui dispositivi mobili.

Per iniziare, semplicemente include tutte le dipendenze JavaScript, insieme agli script Muuri. Puoi trascinarli attraverso npm o prendere una copia dal repository GitHub.

Allora lei crea un elemento di griglia del contenitore e scegli quello con una nuova istanza di Muuri () metodo. È tutto piuttosto semplice e particolarmente facile da usare copiando i frammenti di codice dal repository GitHub.

Con supporto completo per tutti i browser moderni (IE9 +) e un'interfaccia touch-enabled, questo plugin è uno dei migliori per le funzionalità di trascinamento della griglia.

Scopri di più leggendo la homepage di Muuri e armeggiando con le demo live. Questo è un ottimo sistema per griglie dinamiche e la sua ancora in sviluppo attivo, quindi ti puoi fidare che questo plugin sarà disponibile per il lungo periodo.