Grenzen von float sprengen

jQuery Masonry

jQuery Masonry

Mehr Möglichkeiten ergeben sich durch den Einsatz von Javascript. Ein schönes Skript für flexiblere Layouts ist jQuery Masonry. jQuery Masonry löst sich von der Zeilenanordnung und ordnet die Elemente so an, dass sie den Platz optimal füllen.

jQuery Masonry ermöglicht eine optimale Platzausnutzung.

© Internet Magazin

jQuery Masonry ermöglicht eine optimale Platzausnutzung.

Das eignet sich nicht für alle Layouts und muss mit einer bewussten Gestaltung verbunden sein, damit es nicht willkürlich und chaotisch wirkt. Aber da, wo es passt, bietet es faszinierende Möglichkeiten. Am besten sehen Sie sich einmal die Layoutbeispiele auf der Webseite von jQuery Masonry an, um festzustellen, ob diese freie und flexible Anordnung für Ihr Designbeispiel geeignet ist.Und so verwenden Sie jQuery Masonry: Als Basis dient wieder eine ungeordnete Liste, die einzelnen Listenpunkte können neben Bildern auch Text enthalten:

<ul id="galerie"><li><h4>Bild 1</h4><img src="landschaft.jpg" alt=
"Landschaft" /></li><!-- Weitere Elemente, auch nur
Text ist moeglich --></ul>

Per CSS erfolgt die grundlegende Gestaltung, das heißt, die Elemente erhalten eine Breite und werden gefloatet:

#galerie li {
list-style: none;
width: 260px;
float: left;
}

Vor dem schließenden </body> binden Sie zuerst jQuery ein und dann den Verweis auf die Plug-in-Datei:

<script src="js/jquery.js"></script><script src="jquery.masonry.min.
js"></script>

Dann kommt der Code zum Starten des Plug-ins:

<script>
$('#galerie').masonry({
itemSelector: 'li'
});</script>

Hier geben Sie den Container an, in dem die Elemente stehen, für die das Plug-in aktiviert werden soll. In unserem Fall ist es das Element mit der id="galerie". Außerdem legen Sie hinter itemSelector fest, für welche Kindelemente die Aufteilung gelten soll, im Beispiel die einzelnen li-Elemente. Die Elementauswahl erfolgt dabei über die ebenfalls aus CSS bekannten Selektoren. Und das war es schon: Jetzt werden die Elemente optimal auf den Platz verteilt.

Mehrspaltige Layouts

Die Anordnung der Elemente zueinander steuert bei den mit inline-block versehenen Elementen die CSS-Eigenschaft vertical-align. Im Screenshot: top, middle und bottom.

© Internet Magazin

Die Anordnung der Elemente zueinander steuert bei den mit inline-block versehenen Elementen die CSS-Eigenschaft vertical-align. Im Screenshot: top, middle und bottom.

Das letzte Beispiel ist geeignet, wenn alle Elemente dieselbe Breite haben. Aber Sie können jQuery Masonry auch für Layouts benutzen, bei denen sich einzelne Elemente über mehrere Spalten erstrecken. Gehen wir einmal davon aus, dass Sie zwei verschiedene Breiten haben, die breiteren Elemente sind doppelt so breit wie die schmaleren.Wieder geschieht die grundlegende Formatierung per CSS:

#galerie li {
width: 215px;
float: left;
border: 1px solid #ddd;
padding: 5px;
margin: 10px;
}

Zur Verdeutlichung der Ausmaße der einzelnen Elemente sind Rahmen ergänzt. Zusätzlich gibt es Abstände, damit die Inhalte nicht direkt an den Rändern kleben.Definieren Sie dann Klassen für die schmaleren und die doppelt so breiten Elemente.

#galerie .col1 {
width: 215px;
}
#galerie .col2 {
width: 462px;
}

Beim richtigen Wert für die doppelt breiten Elemente müssen Sie von der Gesamtbreite der Elemente ausgehen (width + padding-left + padding-right + border-left-width + border-right-width), diesen Wert verdoppeln, den margin zwischen den Werten addieren, hingegen die Werte der äußersten padding und border-width subtrahieren. Anstatt sich mit komplexen Rechnungen abzuplagen, können Sie auch Firebug verwenden, um den richtigen Wert durch Ausprobieren zu ermitteln.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".