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

似乎可以做到这一点。

Answer 2

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

https://github.com/metafizzy/packery

Answer 3

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

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

3 个答案: