Stvorite brze rasporede zidnih rešetki s Bricks.js

Uvijek je bilo prilično jednostavno stvorite rešetke s jQuery, pomoću dodataka i besplatnih tutoriala od razvojnih programera.

Međutim, zidane rešetke su teže graditi, budući da su ne uklapajte se ravnomjerno po cijeloj stranici. Imat ćete širinu fiksne veličine za stupce, ali visina stavke može jako varirati.

Da napravite savršena rešetka za zidanje piksela trebate dodatak kao što je Bricks.js.

Ovaj dodatak je potpuno otvoren i smiješno brz. to će prikazati mrežu za manje od pola sekunde, čak i s desecima stavki na stranici.

Većina ljudi prepoznaje zidne rešetke od Pinterest-a jer su popularizirali izgled. Ali od tada je odrastao koristi na mnogim drugim web-lokacijama, isto.

Da biste započeli s Bricks.js, trebat će vam neki sadržaj i a zadani izgled stranice. Plugin instalirate izravno s npm ili preko GitHub ako je to lakše.

Prilikom početnog postavljanja, prolazite tri specifična parametra:

1. kontejner - DOM element spremnika za mrežu
2. upakiran - atribut koji određuje kako se stavke kreću u mreži
3. veličine - niz širina i oluka, definirano u pikselima

Dodatak koristi sve te vrijednosti za automatizaciju zidane mreže od nule.

I možete čak i koristite ga za beskonačno učitavanje ako želite zidne rešetke koje rade baš kao i Pinterest.

Pogledajte demo stranicu za interaktivna mreža koje možete promijeniti za testiranje. Vas definirajte ukupan broj elemenata i automatizirat će proces dok prikazuje ukupno vrijeme prikazivanja.

Na primjer, testirao sam mrežu 500 elemenata i to je samo uzelo 13 milisekundi dovršiti. To ne utječe na vrijeme za učitavanje svih 500 slika, ali 13 ms za automatski generiranu mrežu je vrlo impresivan.

Započnite sami preuzimanjem datoteka s GitHub i slijedite upute za instalaciju. U početku se to može zbuniti, ali što se više igrate s njim, lakše je postaviti ga.