Erstellen Sie schnelle Masonry-Raster-Layouts mit Bricks.js

Das war schon immer ziemlich einfach Erstellen Sie Raster mit jQuery, mit Plugins und kostenlosen Tutorials von Entwicklern.

Mauerwerksgitter sind jedoch schwieriger zu bauen, da sie vorhanden sind passen Sie sich nicht gleichmäßig über die Seite. Für Spalten haben Sie jedoch eine feste Breite Artikelhöhen können stark variieren.

Ein ... machen Pixel-perfektes Mauerwerksgitter Sie benötigen ein Plugin wie Bricks.js.

Dieses Plugin ist absolut Open Source und lächerlich schnell. Es wird rendern Sie das Raster in weniger als einer halben Sekunde, sogar mit Dutzenden von Elementen auf der Seite.

Die meisten Leute erkennen Mauerwerksnetze von Pinterest, seit sie das Layout populär gemacht haben. Aber seitdem ist es gewachsen wird auf vielen anderen Websites verwendet, auch.

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

Mit der Ersteinrichtung bestanden Sie drei spezifische Parameter:

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

Das Plugin verwendet alle diese Werte, um das Mauerwerksraster von Grund auf zu automatisieren.

Und du kannst sogar Verwenden Sie es für unendlich Laden Wenn Sie möchten, dass Mauerwerkgitter wie Pinterest funktionieren.

Schauen Sie sich die Demo-Seite an interaktives Gitter das können Sie zum Testen ändern. Sie Definiere die Gesamtzahl der Elemente und es automatisiert den Prozess, während die gesamte Renderzeit angezeigt wird.

Zum Beispiel habe ich ein Raster mit getestet 500 Elemente und es hat nur gedauert 13 Millisekunden fertigstellen. Dies berücksichtigt nicht die Zeit für das Laden aller 500 Bilder, sondern 13 ms für ein automatisch erzeugtes Gitter ist sehr beeindruckend.

Starten Sie selbst, indem Sie die Dateien von GitHub herunterladen und den Installationsanweisungen folgen. Dies mag auf den ersten Blick verwirrend erscheinen, aber je mehr Sie damit spielen, desto einfacher ist die Einrichtung.