Opret hurtige murværklayouts med Bricks.js

Det har altid været ret simpelt at Opret gitter med jQuery, bruger plugins og gratis tutorials fra udviklere.

Men murværk er hårdere at bygge, da de Pas ikke jævnt på tværs af siden. Du har faste bredder for kolonner, men varehøjder kan variere vildt.

At lave en pixel-perfekt murværk du har brug for et plugin som f.eks Bricks.js.

Denne plugin er helt åben kilde og latterligt hurtig. Det vil gøre gitteret på mindre end et halvt sekund, selv med snesevis af genstande på siden.

De fleste mennesker genkender murværk fra Pinterest, da de populariserede layoutet. Men det er siden vokset til at være bruges på mange andre hjemmesider, også.

For at komme i gang med Bricks.js skal du bruge noget indhold og a standard side layout. Du installerer pluginet lige fra npm eller gennem GitHub, hvis det er nemmere.

Med den oprindelige opsætning passerer du tre specifikke parametre:

1. Beholder - -en DOM beholderelement til gitteret
2. pakket - en attribut der bestemmer, hvordan emnerne flyder i nettet
3. Størrelser - en vifte af bredder og tagrender, defineret i pixels

Pluggen bruger alle disse værdier til at automatisere murværkene fra bunden.

Og du kan endda brug den til uendelig læsning hvis du vil have murværk, der fungerer ligesom Pinterest.

Tjek demosiden for en interaktivt net at du kan ændre til test. Du definer det samlede antal elementer og det automatiserer processen, mens den samlede gengivelsestid vises.

For eksempel testede jeg et net med 500 elementer og det tog kun 13 millisekunder at færdiggøre. Dette påvirker ikke tiden for alle 500 billeder at indlæse, men 13 ms til et automatisk genereret net er meget imponerende.

Kom godt i gang ved at downloade filerne fra GitHub og følg installationsvejledningen. Dette kan føle sig forvirrende i starten, men jo mere du legetøj med det, jo lettere er det at oprette.