Opprett raske Masonry Grid Layouts med Bricks.js

Det har alltid vært ganske enkelt å opprett grids med jQuery, bruker plugins og gratis opplæringsprogrammer fra utviklere.

Imidlertid er murverkene tøffere å bygge, siden de Ikke pass jevnt over hele siden. Du har bredde i fast størrelse for kolonner, men varehøyder kan variere vilt.

Å lage en piksel-perfekt murstein du trenger et plugin som Bricks.js.

Denne plugin er helt åpen kildekode og latterlig rask. det vil Gjør rutenettet på mindre enn et halvt sekund, selv med dusinvis av gjenstander på siden.

De fleste kjenner igjen murstein fra Pinterest siden de populariserte oppsettet. Men det har siden vokst til å være brukes på mange andre nettsteder, også.

For å komme i gang med Bricks.js, trenger du noe innhold og a standard sidelayout. Du installerer pluginet rett fra npm eller gjennom GitHub hvis det er lettere.

Med det første oppsettet passerer du tre spesifikke parametere:

1. Container - en DOM beholderelement for rutenettet
2. pakket - en Egenskap som bestemmer hvordan elementene flyter i rutenettet
3. størrelser - en utvalg av bredder og takrenner, definert i piksler

Pluggen bruker alle disse verdiene til å automatisere murrutenettet fra bunnen av.

Og du kan til og med bruk den til uendelig lasting hvis du vil ha murverk som fungerer som Pinterest.

Sjekk demo siden for en interaktivt rutenett som du kan endre for testing. Du definer totalt antall elementer og det vil automatisere prosessen mens du viser total gjenværende tid.

For eksempel testet jeg et rutenett med 500 elementer og det tok bare 13 millisekunder å fullføre. Dette påvirker ikke tiden for alle 500 bilder å laste, men 13 ms for et automatisk generert rutenett er veldig imponerende.

Kom deg i gang ved å laste ned filene fra GitHub og følg installeringsinstruksjonene. Dette kan føle seg forvirrende først, men jo mer du leker med det, desto lettere er det å sette opp.