views:

284

answers:

3

hi,

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

+2  A: 

Take a look at jQuery Masonry, a great plugin.

Harmen
hi, Masonry seems pretty cool...but does it add new columns (redistributing the content) if the window width increases ? (or it just resizes the width of the columns ?)
Patrick
I'm afraid that I need to assign the correct column to each element with the class attribute in html... right ? I would like to avoid that.. because the content changes, when my customer adds new items
Patrick
A: 

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]

ItzWarty
hi, thanks for reply- I need a cross-browser solution of course, I cannot ignore IE- your answer is entirely focused on detecting window width right ? What about the other points ? I'm using jquery to detect the window width, that's easy to do.
Patrick
The differences should be minor. I was doing something like this last year. when I set the width of an object to ... say, 100px, IE would render it at 110 px [or occasionally, it wouldn't respect the width css tag at all]... Once again, IE is pretty good with tables [actually it screws a ton of stuff up] so... idk. I'm gonna eat breakfast now and i'll brainstorm while doing so, heh
ItzWarty
Ok, do you have images in your divs?
ItzWarty
A: 

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

Patrick