Responsive layout uneven height

Question

I've been trying to wrap my head around how to tackle a certain webpage-design for the past few days, but so far I've not been able to come up with any elegant solutions.

To briefly sum up the design there are 3 columns of containers where the containers have uneven (dynamically generated) heights but the same (fluid) widths. They need to be laid out so that they are in numerical sequence going left-to-right; i.e. 1-2-3 on the top row, followed by 4-5-6 on the second row and so on.

Now, what really busts my nut is trying to make this line up neatly without a lot of unnecessary "vertical spacing" in-between the containers. I've created the following mock-up code (also available as a JSFiddle below the code-blocks) to illustrate:

HTML

<div class="wrapper" id="wrapper">
    <div class="container small"  id="container_1">1</div>
    <div class="container large"  id="container_2">2</div>
    <div class="container small"  id="container_3">3</div>
    <div class="container medium" id="container_4">4</div>
    <div class="container small"  id="container_5">5</div>
    <div class="container medium" id="container_6">6</div>
    <div class="container large"  id="container_7">7</div>
    <div class="container medium" id="container_8">8</div>
    <div class="container large"  id="container_9">9</div>
    <div class="clearfix"></div>
</div>

CSS

.wrapper {
    width: 100%;
    padding: 5%;
}
.clearfix {
    clear: both;
}
.container {
    display: block;
    float: left;
    width: 25%;
    margin: 2.5%;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}
.small {
    height: 100px;
    background: red;
}
.medium {
    height: 150px;
    background: green;
}
.large {
    height: 200px;
    background: blue;
}

JSFiddle: http://jsfiddle.net/tzikas/MYgNx/

Note: Since the column-layout itself will eventually break down to two/one column(s) based on the device-width I included a simple "Toggle layout" button in the JSFiddle to emulate this.

What I would like help figuring out is as follows:

1. How do I get rid of the excessive vertical spacing between, per example, "1" and "5" or "2" and "6"?
2. How do I get "4" to position itself below "1" instead of below "3" (while also solving the previous point)?

Preferably I want to solve this without manipulating the DOM through any kind of scripting, but if I have to then mooTools is my "preferred poison.

Answer 1

As per your requirements. You can use http://masonry.desandro.com/ for this.