7

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
  });

});
4

3 回答 3

6

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

并且似乎可以解决问题。

于 2013-08-19T08:51:40.680 回答
4

不知道这个答案是否为时已晚,但请查看 Packery。这是一个砖石类型的插件,它就是这样做的:

https://github.com/metafizzy/packery

于 2013-06-13T21:24:06.163 回答
0

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

于 2013-06-13T21:36:02.180 回答