强制砌体/类似物忽略流动并填充间隙答案

【问题标题】：Force Masonry/similar to ignore flow and fill gaps instead强制砌体/类似物忽略流动并填充间隙
【发布时间】：2013-04-19 01:12:19
【问题描述】：

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

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

这是我的问题的 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
  });

});

【问题讨论】：

不知道提问者是怎么解决这个问题的？ :\
刚刚从 Packery 的作者那里发布了这个脚本（也是一个不错的选择）：github.com/DrewDahlman/Mason

标签： javascript css layout jquery-masonry

【解决方案1】：

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

而且似乎成功了。

【讨论】：

【解决方案2】：

不知道这个答案是否为时已晚，但请查看 Packery。这是一个砌体类型的插件，可以做到这一点：

https://github.com/metafizzy/packery

【讨论】：

感谢您的回答。实际上，作者创建了这个新库：github.com/DrewDahlman/Mason
packery 是我的必经之路。 Mason.JS (github.com/DrewDahlman/Mason) 似乎没有那么灵活。

【解决方案3】：

更好的解决方案是二维包装。完美的砌体http://www.drewdahlman.com/meusLabs/?p=218可以解决一些与缝隙有关的问题。

【讨论】：