it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori


Crea veloci layout di griglia in muratura con Bricks.js

È sempre stato piuttosto semplice creare griglie con jQuery, usando plug-in e tutorial gratuiti da parte degli sviluppatori.

Tuttavia, le griglie in muratura sono più difficili da costruire, dal momento che non si adattano uniformemente sulla pagina . Avrai delle larghezze di dimensioni fisse per le colonne, ma le altezze degli oggetti possono variare notevolmente .

Per creare una griglia in muratura perfetta per i pixel è necessario un plug-in come Bricks.js .

Questo plugin è completamente open-source e incredibilmente veloce. Renderà 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 per essere utilizzato anche in molti altri siti web .

Per iniziare con Bricks.js, avrai bisogno di alcuni contenuti e un layout di pagina predefinito . Installa il plug-in direttamente da npm o tramite GitHub se è più semplice.

Con la configurazione iniziale, si passano tre parametri specifici :

  1. Contenitore : un elemento contenitore DOM per la griglia
  2. Confezionato : un attributo che determina il flusso degli elementi nella griglia
  3. Dimensioni : una serie di larghezze e grondaie, definiti in pixel

Il plugin utilizza tutti questi valori per automatizzare la griglia della muratura da zero.

E, puoi anche usarlo per il caricamento infinito se vuoi griglie di muratura che funzionano proprio come Pinterest.

Controlla la pagina demo per una griglia interattiva che puoi modificare per il test. Definisci il numero totale di elementi e automatizzerà il processo visualizzando il tempo totale di rendering.

Ad esempio, ho testato una griglia con 500 elementi e ci sono voluti solo 13 millisecondi per completare. Questo non tiene conto del tempo necessario per caricare tutte le 500 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.

20 modelli "Prossimamente" che vale la pena aspettare

20 modelli "Prossimamente" che vale la pena aspettare

Quindi stai cercando di dare al tuo sito WordPress un nuovo aspetto e stai cercando di capire i nodi in tempo per il 2015; oppure hai una nuova app, prodotto, azienda o album che vuoi rilasciare e speri di generare un po 'di entusiasmo pubblicando un sito Coming Soon . Quindi, avrai bisogno di te stesso un fantastico tema Coming Soon o Under Construction

(Consigli tecnici e di design)

Scarica temi gratuiti selezionati a mano in Template Stash

Scarica temi gratuiti selezionati a mano in Template Stash

Con quale frequenza finisci la ricerca di ore per trovare un tema WordPress gratuito e decente ? Questo può valere anche per tutti i CMS "da Shopify a Ghost.Con Template Stash troverai tutti i migliori temi gratuiti in un'unica posizione per una facile navigazione. Questo sito è progettato intorno ai temi di più alta qualità basati su categorie e tag per una facile selezione. Pu

(Consigli tecnici e di design)