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.

© 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

© 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 lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.