【问题标题】:Masonry plugin vertical gaps砌体插件垂直间隙
【发布时间】:2014-04-03 10:40:48
【问题描述】:

我正在尝试将类似 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/

提前致谢

【问题讨论】:

    标签: jquery jquery-masonry masonry


    【解决方案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;
    }
    

    【讨论】: