Drei super einfache Möglichkeiten, um ein Mauerwerk zu erstellen

Masonry-Stil-Layouts überschreiten die Grenzen kreativer Layouttechniken. Ich persönlich liebe es, wie fähig sie sind, die Effizienz von Galerien zu maximieren, die unterschiedlich hohe Gegenstände enthalten. Jeder Bildschirmplatz wird verwendet und das Ergebnis kann geradezu hypnotisierend sein.

Heute werden wir uns mit dem Konzept, den Ideen und den populären Techniken beschäftigen, die derzeit in Mauerwerks-Layouts vorherrschen. Wir werden drei verschiedene Methoden kennenlernen, um ein Mauerwerk-Layout zu erstellen, die Besonderheiten und die Besonderheiten eines jeden zu besprechen und sicherzustellen, dass das Ergebnis sehr gut anspricht und basierend auf der Browserbreite reflows.

Was ist ein Mauerwerk?

Wenn Sie Objekte in CSS verschieben, ordnet der Browser die Elemente zuerst horizontal und dann vertikal an. Wenn wir einen Container mit mehreren gleichgroßen Objekten füllen und sie nach links schweben lassen, erhalten wir ein schönes Raster von Bildern.

Wenn die Objekte jedoch variable Höhen haben, sind die Ergebnisse viel schwieriger vorherzusagen. Anstelle eines schönen, engen Gitters bekommen wir etwas, das ziemlich zerstreut ist.

Das offensichtliche Dilemma hier ist, wie man ein schönes, enges Gitter mit Elementen mit variabler Höhe herstellt. Es ist ein ziemlich interessantes Thema, und verschiedene Entwickler haben verschiedene Wege gefunden, um dies zu erreichen. Werfen wir einen Blick auf drei der derzeit besten Lösungen.

Um noch einen Schritt weiter zu gehen, stellen wir sicher, dass alle drei Lösungen ansprechen, dh das Raster wird umfließen, wenn sich die Fenstergröße ändert.

jQuery Maurerarbeit

jQuery Masonry ist die beliebteste Lösung, um diese Art von Layout zu erstellen. Es verwendet einigermaßen schickes JavaScript, um eine Reihe von Divs neu zu fließen.

Die Umsetzung von Mauerwerk ist ziemlich einfach. Alles, was Sie brauchen, ist ein Container, der eine Reihe von divs enthält, die Sie im Mauerwerkstil anordnen möchten. Sie können alles, was Sie möchten, in die Divs einfügen. In diesem Fall habe ich Platzhalterbilder eingefügt.

Sobald Sie das in der richtigen Reihenfolge haben, werfen Sie in jQuery und jQuery Masonry. Dann müssen Sie eine einfache Funktion erstellen, die Ihren Container identifiziert und auf die Klasse abzielt, die wir für unsere Masonry-Images verwendet haben. Hier ist ein grundlegendes Beispiel: