25 Powerful Examples of Masonry jQuery Web Design
jQuery is a powerful tool for animation, image galleries, tooltips, dynamic forms, real time updates and a variety of other techniques that we’ve featured jQuery tutorials on before. It is purely used on many cased either in web design or development. However, jQuery web design effects can be hard to implement in designs properly, because you have to know how to use them to enhance usability and not detract from the design or user experience.
Today Gallery is purely based on the concepts of Masonry. This layout plugin is developed by David DeSandro. You can see the difference of before and after effects of Masonry below diagram.
Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
25 Powerful Examples of Masonry jQuery Web Design
Photography by Koa Metter
Chromeography
Pattern Tap – Alpha
Puma Running
Dazed Digital
Rather Splendid
The Inspiration Theme – Veerle Peters
Untitled
The Mid-Century Modernist
Glauce
Inspire Well
Min Tran’s Journal
VBG
Bettr 2.3.2
Matthew Anderson
Darren John
All In My Head
Ryan O’Rourke
Antimonotonia
drwr.it
Shaken Grid
Annebenor
Toutpourlesyeux
bench
centerline
A bit late to the party but here’s another good example: http://www.wefaves.com/
Nice roundup – has anyone found anything other that Isotope that does a horizontal rather than vertical Masonry type effect?
Cheers, Nick
YouUnbox.com, YouGamePlay.com also use Masonry.
The live sites of Puma Running, The Ground, and Patterntap all are back to using fixed-size boxes in their grids. Is the masonry craze dead?
Some great sites in this collection, personally I feel Masonry works better with an uncluttered design like on the above site Chromeography and http://theground.co.uk/
Very collective information….Thanks for sharing…
Nice technique, Cool stuff for designers, Thanks for the post.
Hi,
Nice list!
Here is another website using masonry and custom movements: http://www.gdotmoda.com/en/online-boutique
thanks for addition
really useful..thanks!
Very useful. This makes me think again to improvise my site to be such unique, featuring masonry jquery. Thanks for the inspirational example sites.
Great list!
Another website using masonry: http://hellcat.is
Can’t decide if Masonry has become overused or has reached the stage where its an essential part of web furniture. Great collection and inspiration though!
Nice collection mate, will check these out!
Thanks for the great list of Masonry sites!
I’ve found it’s really useful for resolution-dependant layouts, which make best use of the available screen width.
The shuffle animation on resize is great too.