砌体插件的垂直间隙 [英] Masonry plugin vertical gaps

问题描述

我正在尝试将类似pinterest的项目样式添加到我的画廊中，但是缩略图之间的差距越来越大.在SO上发现了几个类似的问题，但不幸的是，没有一个问题对我的状况有所帮助.

I am trying to add pinterest-like item style to my gallery, but getting huge gaps between my thumbnails. Found several similar questions on SO, but none of them helped with my situation, unfortunately.

脚本

$('#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/

预先感谢

推荐答案

这是一个可行的示例，请看一看，让我知道这是否是您要的.

Here's a working example, Have a look and let me know if this is what you're after.

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

这篇关于砌体插件的垂直间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！