Force Masonry/similar to ignore flow and fill gaps instead

Question

Masonry/Isotope/Freetile and the rest do a great job at absolute positioning elements in a grid/container.

However, when an element takes the full width of the grid/container, it creates massive gaps which is not an acceptable outcome.

Here is a jsfiddle to my problem: http://jsfiddle.net/QNf3A/1/

There's enough room on the top of the red div to place a green one. However, the different libraries tend to respect the flow as opposed to a "leave no gaps" philosophy.

Does anyone know of an alternative js library or similar trick to avoid gaps?

-

Code from jsfiddle...

HTML:

<div id="container">
    <div class="block half"></div>
    <div class="block full"></div>
    <div class="block half"></div>
    <div class="block half"></div>
    <div class="block half"></div>
</div>

CSS:

#container{
    width: 600px;
    background-color: #EEE;
}
.block{
  float: left;
}
.half{
    width: 300px;
    height: 100px;
    background-color: #CFC;
}
.full{
    width: 600px;
    height: 100px;
    background-color: #FCC;
}

JS/jQuery:

$(function($) {

  $('#container').masonry({
    itemSelector: '.block',
    columnWidth: 300
  });

});

Answer 1

I found this:
https://github.com/DrewDahlman/Mason

And seems to do the trick.

Answer 2

Don't know if this answer is too late or not but check out Packery. It's a masonry type plugin that does just this:

https://github.com/metafizzy/packery