Wordpress posts in columns - php

Question

I am trying to create a wordpress theme. i would like to have three columns with post excerpts. But the problem is that they don't always have the same height (and i don't want them to), so when in one row a post is too high, the next row will start too far away.
Hmmm, i can really explain it, so i created this fiddle to show what i mean:
//in the fiddle there is html and css making a clear example of what i mean
http://jsfiddle.net/59qyD/1/
As you can see post id#5 is too long, so post #7 doesn't go any more under post #4.
What i would like is to find a solution where the post always "go up" to the previous post in that column. If possible, without any plugins...
Any ideas?

Answer 1

To create a dynamic column height no matter if it's images/posts/products, you can apply Masonry JS
This JS offers you the possibility to fit each new div under the previous div from the above line, and has a great effect of showing it.

Answer 2

Here is a PHP + CSS based solution:
PHP:
$count = 0;
$count_total = 10; // or use dynamic count: count($all_posts)
$columns = 3;
foreach ( $all_posts as $k=>$v ) {
$count++;
$is_first_column = false; // always set to false, then set to true only when the condition matches!
// Now check is this a post for the first column
if( $count==1 || ($count-1)%$columns==0 ) { // check if it's 1st and every 4,7,10 post and place it in 'column 1'
// set additional class for every post that need to be placed in the first column
$is_first_column = true;
}
// Now you can add the additional class to the html markup:
<article id="post-<?php the_ID(); ?>" class="post col<?php if( !empty( $is_first_column ) ) { echo ' column_1'; } ?>">
}
And then use CSS to clear the float for every .column_1.
CSS:
.column_1 {
clear: both;
}
I used similar approach in multiple projects and it worked. The code above may need to me modified a bit to work for your specific theme, but I hope you'll get the main idea.
It will work immediately after page + CSS load (no waiting for JS to load)! :-)