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:

<img src="//lesptitesaffairesdemayl.be/img/images_2/three-super-easy-ways-to-pull-off-a-masonry-layout_4.jpg"> <h2>Wookmark</h2> <img src="//lesptitesaffairesdemayl.be/img/images_2/three-super-easy-ways-to-pull-off-a-masonry-layout_5.jpg"> <p>Wookmark.js ist eine weitere beliebte JavaScript-Lösung, um dieselbe Art von Layout zu erreichen. Dies ist das treibende Plugin hinter dem Pinterest-ähnlichen Wookmark.com.</p> <p>Wookmark.js ist meiner Meinung nach etwas schwieriger als jQuery Masonry zu implementieren, da es an Dokumentation fehlt, aber es ist immer noch ziemlich grundlegend. Alles, was wir tun müssen, ist, eine Reihe von Bildern in eine ungeordnete Liste zu werfen. Der Haken an diesem Plugin ist, dass wir für jedes der Bilder Inline-Höhenwerte angeben müssen.</p> <textarea wrap="soft" readonly=""> <ul> <li><img src="//lesptitesaffairesdemayl.be/img/images_2/three-super-easy-ways-to-pull-off-a-masonry-layout_6.jpg"> <h2>Reines CSS</h2> <p>Die JavaScript-Lösungen sind wahrscheinlich die sichersten und am weitesten verbreiteten Möglichkeiten, um ein Mauerwerk zu umgehen, aber der CSS-Nerd in mir wusste, dass es einen Weg geben musste, ohne JavaScript auszukommen.</p> <p>Es stellt sich heraus, dass es ziemlich einfach ist, ein paar ausgefallene CSS3 zu verwenden. Diese Technik wurde von Radu Chelariu bei SickDesigner entwickelt und ist zwar definitiv nicht so leistungsfähig, flexibel oder Browserbrowser-kompatibel wie die vorherigen Optionen. Trotzdem ist sie äußerst beeindruckend, da sie alle CSS-Funktionen enthalten.</p> <p>Um zu beginnen, verwenden wir die gleiche ungeordnete Liste wie beim letzten Mal (keine Inline-Stile erforderlich), die in ein Container-Div geworfen wird. </p> <textarea wrap="soft" readonly=""> <ul> <li><img src="//lesptitesaffairesdemayl.be/img/images_2/three-super-easy-ways-to-pull-off-a-masonry-layout_7.jpg"> <h2>Fazit</h2> <p>In einem kürzlich erschienenen Artikel auf Pinterest habe ich darüber diskutiert, wie leistungsstarke Mauerwerkslayouts aus UX-Perspektive sein können, insbesondere in Kombination mit unendlichem Scrollen.</p> <p>Sie können definitiv davon ausgehen, dass dieser aufkeimende Trend an Popularität gewinnt und bevor Sie es wissen, werden Sie Kunden nach einem Layout fragen, das auf Pinterest angezeigt wird. Wenn dies passiert, sind Sie jetzt mit drei möglichen Lösungen vorbereitet!</p></li></ul>