CSS/Javascript: dynamic multiple columns

I need开发者_如何学运维 to build a dynamic multiple columns view for the content of my website (I'm using drupal as CMS, if can be useful info), with the following features

1) the columns width is fixed (OK)

2) the columns number depends on the window width (OK)

3) the elements has not fixed height (important, not fixed yet)

4) the content should be possibly vertically distributed (no idea how to do this, since I use css attribute float:left)

See this screenshot to better understand: http://dl.dropbox.com/u/72686/grid.png

thanks

---

Take a look at jQuery Masonry, a great plugin.

---

Well, i'll try to chip in some.
the following website: http://www.quirksmode.org/dom/w3c_cssom.html used to host the following code [although they've taken it down I guess =/ but it functions well, and i've been using it in almost all of my projects]

function getClientWidth()
{ 
    if( typeof( window.innerWidth ) == 'number' ) {
        return window.innerWidth;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        return document.documentElement.clientWidth;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        return myWidth = document.body.clientWidth;
    }
}
function getClientHeight()
{  
    if( typeof( window.innerWidth ) == 'number' ) {
        return window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        return document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        return document.body.clientHeight;
    }
}

Note that getting the internal width of the browser [the window's size excluding the chrome] is different for many browsrs, as you can see in the code.

You must follow this by doing an if/switch to format your page depending on what you want to do [css styling's positoin = absolute, left, top,] clamp the width/height or you'll get the result of acid3 when it runs on IE =) [anyone get that joke? heh?]

Note that if you use my method, IE dislikes you and er... divs[your columns] tend to overlap. Sadly, the safest way to do anything in your situation is by using a table. However, most "modern" web developers tend to dislike table for laying out your website [in fact, some consider it to be deprecated]

---

I've solved with this wonderful jquery plugin: http://welcome.totheinter.net/columnizer-jquery-plugin/