Erstellen Sie schnelle Mauergitter Layouts mit Bricks.js

Es war immer ziemlich einfach , Grids mit jQuery zu erstellen, mit Plugins und kostenlosen Tutorials von Entwicklern.

Mauergitter sind jedoch schwieriger zu bauen, da sie nicht gleichmäßig über die Seite passen . Sie haben Spalten mit fester Größe für Spalten, aber die Elementhöhen können stark variieren .

Um ein pixelgenaues Mauergitter zu erstellen, benötigen Sie ein Plugin wie Bricks.js .

Dieses Plugin ist völlig open-source und lächerlich schnell. Dadurch wird das Raster in weniger als einer halben Sekunde gerendert, selbst bei Dutzenden von Elementen auf der Seite.

Die meisten Menschen erkennen Mauergitter von Pinterest, seit sie das Layout populär gemacht haben. Inzwischen ist es aber auch auf vielen anderen Websites im Einsatz.

Um mit Bricks.js zu beginnen, benötigen Sie einige Inhalte und ein Standard-Seitenlayout . Sie installieren das Plugin direkt von npm oder über GitHub, wenn das einfacher ist.

Bei der Ersteinrichtung werden drei spezifische Parameter übergeben :

1. Container - ein DOM-Containerelement für das Raster
2. Verpackt - Ein Attribut, das bestimmt, wie die Elemente im Raster fließen
3. Größen - eine Reihe von Breiten und Rinnen, in Pixel definiert

Das Plugin verwendet all diese Werte, um das Mauergitter von Grund auf zu automatisieren.

Und Sie können es sogar für unendliches Laden verwenden, wenn Sie Mauergitter wollen, die genau wie Pinterest funktionieren.

Sehen Sie sich die Demoseite für ein interaktives Raster an, das Sie zum Testen ändern können. Sie definieren die Gesamtzahl der Elemente und automatisieren den Vorgang, während die gesamte Renderzeit angezeigt wird.

Zum Beispiel habe ich ein Gitter mit 500 Elementen getestet und es dauerte nur 13 Millisekunden . Dies berücksichtigt nicht die Zeit für das Laden aller 500 Bilder, aber 13 ms für ein automatisch generiertes Gitter sind sehr beeindruckend.

Starten Sie selbst, indem Sie die Dateien von GitHub herunterladen und den Installationsanweisungen folgen. Dies mag zunächst verwirrend sein, aber je mehr Sie damit spielen, desto einfacher ist es einzurichten.