javascript - Force Masonry/similar to ignore flow and fill gaps 相反

Question

Masonry/Isotope/Freetile 和其他在网格/容器中绝对定位元素方面做得很好。

但是，当元素占据网格/容器的整个宽度时，它会产生巨大的间隙，这是 Not Acceptable 结果。

这是我的问题的一个 jsfiddle: http://jsfiddle.net/QNf3A/1/

红色 div 顶部有足够的空间放置绿色 div。然而，不同的图书馆倾向于尊重流程，而不是“不留缝隙”的理念。

有谁知道替代的 js 库或类似的技巧来避免差距？

-

来自 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

我发现了这个:
https://github.com/DrewDahlman/Mason

而且似乎可以解决问题。