Skapa Snabba Masonry Grid Layouts med Bricks.js

Det har alltid varit ganska enkelt att skapa nät med jQuery, använder plugins och gratis handledning från utvecklare.

Masonrynät är dock tuffare att bygga, eftersom de passa inte jämnt över sidan. Du har bredd i fast storlek för kolumner men Arthöjder kan variera vildt.

Att göra en pixel-perfekt masonry rutnät du behöver ett plugin som Bricks.js.

Denna plugin är helt öppen och löjligt snabb. det kommer gör gallret på mindre än en halv sekund, även med dussintals objekt på sidan.

De flesta känner igen murnät från Pinterest eftersom de populariserar layouten. Men det har sedan vuxit till att bli används på många andra webbplatser, för.

För att komma igång med Bricks.js behöver du lite innehåll och a standard sidlayout. Du installerar pluginet direkt från npm eller via GitHub om det är lättare.

Med den första inställningen passerar du tre specifika parametrar:

1. Behållare - en DOM behållarelement för gallret
2. Packade - en attribut som bestämmer hur objekten flyter i rutnätet
3. storlekar - en utbud av bredder och takrännor, definierad i pixlar

Pluggen använder alla dessa värden för att automatisera masonrynätet från början.

Och du kan även använd den för oändlig lastning om du vill ha murnät som fungerar precis som Pinterest.

Kolla in demosidan för en interaktivt rutnät som du kan ändra för testning. Du definiera det totala antalet element och det automatiserar processen medan den totala återgivningstiden visas.

Till exempel testade jag ett rutnät med 500 element och det tog bara 13 millisekunder att slutföra. Detta påverkar inte tiden för alla 500 bilder att ladda, men 13 ms för ett automatiskt genererat rutnät är väldigt imponerande.

Kom igång med att ladda ner filerna från GitHub och följ installationsanvisningarna. Detta kan känna sig förvirrande först men ju mer du leker med det desto lättare är det att sätta upp.