jQuery Plugin: Masonry – Floaten einmal anders oder Tetris im Webdesign?

Vor kurzem bin ich bei meinen Streifzügen durch die Weiten des Netzes auf ein sehr interessantes jQuery Plugin gestoßen, dessen Nutzen und Wirkung mir auf Anhieb klar war und dessen Möglichkeiten für moderne Web-Layouts zumindest auf den ersten Blick vielseitig scheinen. Die Rede ist von David Desandro´s jQuery Plugin Masonry.

wpSEO, das Plugin für WordPress SEO

Das nur 4kb (komprimiert) große Masonry schließt eine Lücke, die CSS bisher nicht zu schließen vermochte. Es sorgt für eine nahezu lückenlose Anordnung von HTML-Elementen, indem es diese nicht wie vom CSS float gewohnt zeilenweise horizontal nebeneinander und dann erst untereinander, sondern in einem Grid erst vertikal und erst dann horizontal anordnet. Für z.B. Layouts im Magazin-Style oder vieleicht Gallerien mit unterschiedlichen Bild-/Thumbnailgrößen könnte dies unter Umständen einiges an Vorteilen bringen.

Vergleich CSS Float (links) und Masonry (rechts) Quelle: http://desandro.com/demo/masonry/

Bei Größenänderungen des Browserfensters werden die Spalten automatisch neu angeordnet. So wird z.B. ganz schnell aus einem 1-spaltigem Layout ein 3-spaltiges.  Nach dynamischen Layoutänderungen – beispielsweise durch Script-gesteuerte Änderung und Erweiterung von Inhalten kann das Plugin über eine Callback-Funktion einfach neu initialisiert werden. Einen leicht bitteren Beigeschmack hat das Ganze leider noch – so ist meines Wissens noch keine Möglichkeit bekannt, mit Plugin-eigenen Mitteln Änderungen der Schriftgröße oder des Browser-Zooms abzufangen und mit Masonry darauf zu reagieren. Allerdings sollte es mit JavaScript oder jQuery möglich sein, dafür eine Lösung zu entwickeln. (einige Ansätze)

Mehr zum Plugin, der Integration, sowie jede Menge Anwendungsbeispiele sind auf der Projekt-Webseite und im Wiki zu finden.

Habt Ihr vieleicht bereits Erfahrungen mit Masonry gesammelt oder sind euch ähnliche, vieleicht sogar bessere Lösungen bekannt? Was haltet ihr von der Nutzung von JavaScript-Bibliotheken wie  jQuery für Layout-Zwecke?

Im folgenden einige Webseiten, die Masonry für ihr Layout nutzen:

Dieser Beitrag wurde unter webdesign abgelegt und mit , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.