Maak snel metselwerkrasterlay-outs met Bricks.js

Het is altijd vrij eenvoudig geweest om maak rasters met jQuery, gebruik van plug-ins en gratis tutorials van ontwikkelaars.

Metselwerkroosters zijn echter moeilijker te bouwen, omdat ze past niet gelijk over de pagina. U hebt breedten van vaste breedte voor kolommen, maar de itemhoogten kunnen enorm variëren.

Om een ​​te maken pixel-perfect metselwerkraster je hebt een plug-in nodig zoals Bricks.js.

Deze plug-in is volledig open-source en belachelijk snel. Het zal maak het raster in minder dan een halve seconde, zelfs met tientallen items op de pagina.

De meeste mensen herkennen metselwerkroosters van Pinterest sinds ze de lay-out hebben gepopulariseerd. Maar het is sindsdien gegroeid te zijn gebruikt in veel andere websites, te.

Om met Bricks.js aan de slag te gaan, hebt u dit nodig wat inhoud en een standaard paginalay-out. U installeert de plug-in direct vanaf npm of via GitHub als dat eenvoudiger is.

Met de initiële installatie pas je drie specifieke parameters:

1. Houder - een DOM-containerelement voor het rooster
2. overvol - een attribuut dat bepaalt hoe de items in het raster stromen
3. maten - een reeks van breedtes en dakgoten, gedefinieerd in pixels

De plug-in gebruikt al deze waarden om het metselwerkraster vanuit het niets te automatiseren.

En je kunt zelfs gebruik het voor oneindige belasting als je metselwerkroosters wilt die net als Pinterest werken.

Bekijk de demo-pagina voor een interactief raster die je kunt wijzigen om te testen. U definieer het totale aantal elementen en het automatiseert het proces terwijl de totale renderingtijd wordt weergegeven.

Ik heb bijvoorbeeld een raster getest met 500 elementen en het duurde maar 13 milliseconden vervolledigen. Dit houdt geen rekening met de tijd voor het laden van alle 500 afbeeldingen, maar 13 ms voor een automatisch gegenereerd raster is zeer indrukwekkend.

Ga zelf aan de slag door de bestanden van GitHub te downloaden en de installatie-instructies te volgen. Dit kan in eerste instantie verwarrend lijken, maar hoe meer je ermee speelt, hoe gemakkelijker het is om het in te stellen.