Creați machete de marmură rapidă cu Bricks.js

Întotdeauna a fost destul de simplu creați grile cu jQuery, folosind plug-in-uri și tutoriale gratuite de la dezvoltatori.

Cu toate acestea, rețelele de zidărie sunt mai greu de construit, deoarece acestea nu se potrivesc uniform pe întreaga pagină. Veți avea lățimi de dimensiune fixă ​​pentru coloane, dar pentru Elementele de înălțime pot varia în mod sălbatic.

Pentru a face o pixel-grilă de zidărie perfectă aveți nevoie de un plugin cum ar fi Bricks.js.

Acest plugin este complet open-source și ridicol de rapid. Se va face grila în mai puțin de o jumătate de secundă, chiar și cu zeci de elemente de pe pagină.

Majoritatea oamenilor recunosc rețelele de zidărie din Pinterest, deoarece au popularizat aspectul. Dar, de atunci a crescut utilizate în multe alte site-uri web, de asemenea.

Pentru a începe cu Bricks.js, veți avea nevoie un anumit conținut și a aspectul paginii implicite. Instalați plugin-ul chiar de la npm sau prin GitHub dacă acest lucru este mai ușor.

Cu configurarea inițială, treceți trei parametri specifici:

1. recipient - A Element container DOM pentru grila
2. bătătorit - un atribut care determină modul în care elementele curg în grilă
3. Dimensiuni - un gama de lățimi și jgheaburi, definită în pixeli

Pluginul utilizează toate aceste valori pentru a automatiza grila de zidărie de la zero.

Și, puteți chiar utilizați-l pentru încărcare infinită dacă doriți rețele de zidărie care funcționează la fel ca Pinterest.

Consultați pagina demo pentru un rețea interactivă pe care le puteți modifica pentru testare. Tu defineste numarul total de elemente și va automatiza procesul în timp ce afișează timpul total de redare.

De exemplu, am testat o rețea cu 500 de elemente și a luat doar 13 milisecunde a termina. Acest lucru nu ia în considerare timpul pentru încărcarea celor 500 de imagini, dar 13 ms pentru o rețea generată automat este foarte impresionant.

Începeți-vă singuri prin descărcarea fișierelor de la GitHub și urmând instrucțiunile de instalare. Acest lucru poate părea confuz la început, dar cu cât jucați mai mult cu ea, cu atât este mai ușor să o configurați.