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.

jQuery Masonry

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

Masonry jQuery Web Design-13

Chromeography

Masonry jQuery Web Design-4

Pattern Tap – Alpha

Masonry jQuery Web Design-1

Puma Running

Masonry jQuery Web Design-2

Dazed Digital

Masonry jQuery Web Design-3

Rather Splendid

Masonry jQuery Web Design-5

The Inspiration Theme – Veerle Peters

Masonry jQuery Web Design-6

Untitled

Masonry jQuery Web Design-7

The Mid-Century Modernist

Masonry jQuery Web Design-8

Glauce

Masonry jQuery Web Design-9

Inspire Well

Masonry jQuery Web Design-10

Min Tran’s Journal

Masonry jQuery Web Design-11

VBG

Masonry jQuery Web Design-12

Bettr 2.3.2

Masonry jQuery Web Design-19

Matthew Anderson

Masonry jQuery Web Design-14

Darren John

Masonry jQuery Web Design-15

All In My Head

Masonry jQuery Web Design-16

Ryan O’Rourke

Masonry jQuery Web Design-17

Antimonotonia

Masonry jQuery Web Design-18

drwr.it

Masonry jQuery Web Design-20

Shaken Grid

Masonry jQuery Web Design-21

 

Annebenor

Masonry jQuery Web Design-22

Toutpourlesyeux

Masonry jQuery Web Design-23

bench

Masonry jQuery Web Design-24

centerline

Masonry jQuery Web Design-25


About the author

With a passion for Knowledge, Smashinghub has been created to explore things like Free Resources For Designers, Photographers, Web Developers and Inspiration.

Twitter Visit author website

Subscribe to Smashing Hub


17 Comments

  1. Dirk says:

    A bit late to the party but here’s another good example: http://www.wefaves.com/

  2. Nick says:

    Nice roundup – has anyone found anything other that Isotope that does a horizontal rather than vertical Masonry type effect?

    Cheers, Nick

  3. mete kamil says:

    YouUnbox.com, YouGamePlay.com also use Masonry.

  4. Shannon says:

    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?

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

  6. Way2Geeks says:

    Very collective information….Thanks for sharing…

  7. mart says:

    Nice technique, Cool stuff for designers, Thanks for the post.

  8. Vincent says:

    Hi,

    Nice list!

    Here is another website using masonry and custom movements: http://www.gdotmoda.com/en/online-boutique

  9. Saifu says:

    really useful..thanks!

  10. wptidbits says:

    Very useful. This makes me think again to improvise my site to be such unique, featuring masonry jquery. Thanks for the inspirational example sites.

  11. Sam says:

    Great list!

    Another website using masonry: http://hellcat.is

  12. csschops says:

    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!

  13. Nice collection mate, will check these out!

  14. AW says:

    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.