Web Development

8 Magical Dynamic and Fluid Layout and How to Make It

Written by Kevin Liew on 20 Jun 2011
85,019 Views • Shares
2 comments

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.
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 5 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 5 years ago