砌体插件垂直间隙

时间:2014-04-03 10:40:48

标签: jquery jquery-masonry masonry

我正在尝试将类似pinterest的项目样式添加到我的库中,但我的缩略图之间存在巨大差距。在SO上发现了几个类似的问题,但遗憾的是,没有一个问题对我的情况有帮助。

脚本

$('#container').masonry({
    itemSelector: '.container',
    columnWidth : 100 
});

<div id="container">
    <div class="item">...</div>
</div>

样式

.item {
  width: 122px;  
  margin: 5px;
  float: left;
  background-color: gray;
}

http://jsfiddle.net/D7QQU/44/

提前致谢

1 个答案:

答案 0 :(得分:1)

这是一个有效的例子,请看一下,如果这就是你想要的,请告诉我。

http://jsfiddle.net/D7QQU/47/

$('#container').masonry({
    itemSelector: '.item',
    columnWidth : 100,
    gutter: 10
});

#container .item {
    background-color: gray;
    width: 100px;
    float: left;
    margin-bottom: 10px;
}