8 Magical Dynamic and Fluid Layout and How to Make It

Written by Kevin Liew on 20 Jun 2011
104,422 Views • Web Development

Introduction

Recently, I have been quite interested with a new kind of web layout - dynamic and fluid layout. It cleverly fills in all the spaces and rearranges each items and display it nicely on browsers, and they usually come with slick animation too. Some of them even have advance filtering for different categories.

I found 8 websites that share the same characteristics and in the last section of this post, I listed 3 jQuery plugins that help you to achieve the same effect as well. Enjoy!

Showcase

How to do it!!!

Alright, I guess you want to know how to do it. Luckily, thanks to these 3 plugins, making them are extremely easy!

  • jQuery Masonry A dynamic layout plugin for jQuery. The flip-side of CSS floats
  • Isotope An exquisite jQuery plugin for magical layouts
  • QuickSand Reorder and filter items with a nice shuffling animation.
By Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Related Articles
Tips, Tricks and Tools You Will Need to Start Using HTML5 Today
Learn How to Write Maintainable CSS
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

2 comments
Kenneth Stein 13 years ago
I've been looking at just this type of design, having tested out each of the jQuery packages you point to for use at Plexav.com where I focus on <a href="http://www.plexav.com ">live web shows</a>. It seems that while the design is fairly novel, the presentation feels hodgepodge. Perhaps there's an organizing principle that will emerge to bring this type of design into the mainstream!
Reply
Simiramis 13 years ago
Perfect http://www.nanorator.com
Reply