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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…