强制砌体/类似于忽略流动和填充空白而不是

Question

砌体/同位素/ Freetile和其他在网格/容器中的绝对定位元素上做的很好。

但是，当一个元素占据网格/容器的全部宽度时，它会产生巨大的间隙，这不是可接受的结果。

这里是一个的jsfiddle我的问题： 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

，似乎这样的伎俩。

Answer 2

不知道这个答案是否太晚，但检查出包装。这是一个砖石类型的插件，不只是这一点：

https://github.com/metafizzy/packery

Answer 3

更好的解决方案是2维的包装。完美的石工http://www.drewdahlman.com/meusLabs/?p=218可以解决一些与缺口有关的问题。