Force Masonry /类似于忽略流动和填补空白

Question

Masonry/Isotope/Freetile和其他人在网格/容器中的绝对定位元素上做得很好.

但是,当元素占据网格/容器的整个宽度时,会产生大量间隙,这是不可接受的结果.

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

红色顶部有足够的空间放置一个绿色的.然而,不同的图书馆倾向于尊重流程,而不是"不留空隙"的理念.

有没有人知道替代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

而且似乎可以做到这一点.