8 Magical Dynamic and Fluid Layout and How to Make It

Written by Kevin Liew on 20 Jun 2011
105,056 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
Popular tools for website testing
The Best 20 Tools for Web Development
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 14 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 14 years ago
Perfect http://www.nanorator.com
Reply