Crea veloci layout di griglia in muratura con Bricks.js
È sempre stato semplice crea griglie con jQuery, utilizzando plugin e tutorial gratuiti da sviluppatori.
Tuttavia, le griglie in muratura sono più difficili da costruire, dal momento che non si adattano uniformemente sulla pagina. Avrai larghezze di dimensioni fisse per le colonne, ma il le altezze degli oggetti possono variare notevolmente.
Fare un griglia in muratura pixel perfetta hai bisogno di un plugin come Bricks.js.
Questo plugin è completamente open source e ridicolmente veloce. Sara rendere la griglia in meno di mezzo secondo, anche con dozzine di oggetti sulla pagina.
La maggior parte delle persone riconosce le griglie in muratura da Pinterest poiché hanno reso popolare il layout. Ma da allora è cresciuto usato in molti altri siti web, pure.
Per iniziare con Bricks.js, avrai bisogno qualche contenuto e a layout di pagina predefinito. Installa il plug-in direttamente da npm o tramite GitHub se è più semplice.
Con la configurazione iniziale, si passa tre parametri specifici:
- Contenitore - un Elemento contenitore DOM per la griglia
- Confezionato - un attributo che determina come gli oggetti scorrono nella griglia
- taglie - un array di larghezze e grondaie, definito in pixel
Il plugin utilizza tutti questi valori per automatizzare la griglia della muratura da zero.
E puoi persino usalo per il caricamento infinito se vuoi griglie in muratura che funzionano proprio come Pinterest.
Controlla la pagina demo di a griglia interattiva che puoi modificare per il test. tu definire il numero totale di elementi e automatizzerà il processo durante la visualizzazione del tempo di rendering totale.
Ad esempio, ho testato una griglia con 500 elementi e ci sono voluti solo 13 millisecondi completare. Questo non tiene conto del tempo necessario per caricare tutte e 500 le immagini, ma 13 ms per una griglia generata automaticamente è molto impressionante.
Inizia da te scaricando i file da GitHub e seguendo le istruzioni di installazione. All'inizio questo potrebbe sembrare un po 'confuso, ma più giochi con esso, più è facile da configurare.
