WebAppers

/ best free open source web resources /

Shopify

15 Great Examples of Websites using jQuery Masonry

Posted · Category: Best Collections

jQuery Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

It’s suitable for websites with a stream of pictures. Users can browse the pictures in a seamless way without clicking “next page”. We have found the following 15 Great Examples of Websites using jQuery Masonry. I hope it can gives you some inspirations for designing similar style websites.

1. Cutest Paw

Cutest Paw

2. All Blues

All Blues

3. Do Whatever It Takes

Do Whatever It Takes

4. Pattern Tap

Pattern Tap

5. We And The Color

We And The Color

6. All in My Head

All in My Head

7. Dazed Digital

Dazed Digital

8. Photography by Koa Metter

Photography by Koa Metter

9. All Women Stalk

All Women Stalk

10. Cla-ude

Cla-ude

11. Chromeography

Chromeography

12. Fab.com

Fab

13. Inspire Well

Inspire Well

14. Interview Magazine

Interview Magazine

15. Veerle’s Blog

Veerle's blog

13 Comments
  • http://262media.com Rui

    Great article
    I woud like to point out http://upmagazine-tap.com the inflight mag website we did for TAP Portugal, the leading Portuguese airline in operation since 1945.

  • http://twitter.com/2eux 2eux

    hmm, well Pinterest anyone ? :)

  • http://www.mlquotes.com/ Max Lagace

    I also made my website with Masonry, and Bootstrap! http://www.quotesaholic.com

  • Guest

    It is so nice. I give it a try with my website: [url=http://ankhang.vn]laptop gia re[/url]

  • William

    I come across this “pinterest-like” classified website :

    http://www.tradbyte.com

  • Fedor Melnikov

    Is your site indexed well by Google crawlers? I’m not sure if masonry takes this moment into account.

  • http://www.mlquotes.com/ Max Lagace

    It is indexed but Google crawlers will not go down the page

  • Fedor Melnikov

    But how did you solve the issue?
    Maybe site map is in use or something else?

  • http://www.mlquotes.com/ Max Lagace

    Yes I have 3 huge sitemaps and also 2-3 pages with all authors, topics, nationalities and professions. Not so beautiful pages but useful for Google (and the sitemap too)

  • Jimmi Prajapati

    How abou this one?

    http://www.imgdj.com

  • http://www.ecommunities.ca/ oucil

    We’ve created a masonry heavy news website that compiles news on any subject from around the globe, check it out: http://cycre.com …pronounced “Seeker”

  • http://www.keen-startup.com Afonso Barbosa

    http://www.pet2mate.com uses this too.

  • http://dueledecirlo.paraguay.com/ Bruno Sacco

    Take a look to this site I’m finishing:
    http://www.moopio.com/pictures.php?id=439441916098422&page=1

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons