jQuery Masonry - Floating content - The easy way!
-
JavaScript
- 8 Dez, 2009
ReTweet - Kommentare (2)
Kleiner Aufwand, große Wirkung! Ein Fazit das jeder gern Webseitenbesitzer von der ein oder anderen Anpassung innerhalb seines Layouts erwartet. Mit dem jQuery-Plugin Masonry allerdings, könnte dies Wirklichkeit werden. Denn jeder der im Umgang mit CSS und der Eigenschaft float konfrontiert wurde, weiß das vor allem in etwas aufwändigeren Layouts es nicht immer ganz einfach ist Elemente zu bestimmen, die von nachfolgende Elemente umflossen werden. Masonry ermöglicht es, eine Webseite im Multicoloum-Layout mit sich "umfliessenden Elementen" spielend leicht umzusetzen. Obendrein passt sich ein solches Spalten-Layout dem Viewport des Browsers an und verringert bzw. erhöht die Anzahl an Spalten, je nach dem zur Verfügung stehendem Platz.
Masonry ein Layout-Plugin für jQuery
Üblicherweise werden gefloatete Elemente horizontal und dann vertikal angeordnet, mit Masnory wird erst vertikal und dann horizontal angeordnet. Unansehnlicher und ungewollter Freiraum gehört somit der Vergangenheit an ( siehe große Abbildung )!
Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid.
Webseiten wie beispielsweise das Portfolio des Designers Andy Bridge zeigen die "Auswirkungen von Masonry" und ermöglichen somit eine Vorstellung was alles mit diesem schlanken Script ( 4KB komprimiert, 8KB unkomprimiert ) möglich ist.
Das von David DeSandro entwickelt Masonry-Plugin für jQuery liegt erst seit 2 Tagen in Version 1.0 vor. Wessen Interesse nun vielleicht an diesem Script geweckt sein sollte und wer mehr über Masonry, dessen Einsatzmöglichkeiten und Implementierung erfahren möchte, kann alle dafür notwendigen Informationen auf der Webseite erhalten.
In diesem Sinne, "Easy floating with Masonry"!
Ähnliche Artikel zu diesem Thema:
- Highcharts - The most interactive Charting Library
- Midori - The ultra-lightweight JavaScript-Framework
- gRaphaël - The JavaScript Library for stunning charts on your Website
- ImageFlow - Die animierte Bilder-Galerie
- jQuery-Plugin Lazy - The on-demand Plugin loader
"CSS-Design - Das CSS Buch"
Webdesign lernen mit CSS-Tutorials. Jetzt kaufen - morgen lesen!
Webstandards Top-5
- CSS3 Transistion Sliding ImageGallery
- CSS3 Tutorial - Menü mit Slide-Effekt
- Creative Image-Galleries - jQuery Collection
- jQuery Websites - The international Showcase
- CSS3 Animation Tutorial bouncing Navigation
Bilder Galerie
Werde Gastautor!
Werde Gastautor und veröffentliche hier
Fachartikel aus den Bereichen Webdesign, Webentwicklung, Usability oder SEO und präsentiere dich hier einer wissbegierigen neuen Leserschaft!
Schon abonniert?
Blog-Partner
- Suchmaschinenoptimierer (Freelancer - SEO & SEM)
- SEO Analysen, Umsetzung & Consulting by meentix
- SEM - Suchmaschinenmarketing
- Fotobuch-Software
08 Dez 2009, 09:51
Was bitte hat das Plugin mit dem Multicolumn-Modul von CSS3 zu tun? Es bestimmt die Breiten der floatenden Boxen und orndet sie mittels Absoluter Positionierung neu. Zum Einen gibt es bei dieser Darstellung kein "umfließen", zum anderen hat man keine Kontrolle über die Position der einzelnen Elemente (das verlinkte Beispielportfolio zeigt dies ganz deutlich).
08 Dez 2009, 10:10
Keine Kontrolle über die Position der einzelnen Elemente? Das hängt doch immer davon ab in wie fern diese Elemente wechselnden Inhalten unterliegen oder nicht. Ansonsten heißt dies natürlich auch bei einer Umsetzung mit diesem Plugin, mögliche Darstellungsvarianten bspw. je nach Viewport zu testen. Die oben verwendeten Anführungsstrichen für das "Umfliessen", beziehen sich auf die visuelle Anordnung der Elemente und nicht auf CSS-Eigenschaft.