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
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.
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
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.
