图像下方的砌体意外间距，直到调整大小

Question

我刚开始使用加载图像的砌体，但遇到了一个奇怪的问题。一切都按照我的意图工作，除了每张图片下面有一个我不想要的大约 3px space，一旦我调整 window 的大小，这个 space 就会消失。我不知道是什么原因造成的，任何帮助都会很棒。我已经尝试删除边框，但仍然存在 space.

CSS:

/* Masonry */
* { 
    box-sizing: border-box; 
}

// Grid
.grid {
    //background: #DDD;
}

// Clearfix
.grid:after {
    content: '';
    display: block;
    clear: both;
}

// Grid Item
.grid-sizer, .grid-item {
    width: 20%;
}

.grid-item {
    float: left;
    border: 5px solid $babyBlue;
}

.grid-item img {
    display: block;
    max-width: 100%;
}

Javascript:

// Enable Masonry
    var $grid = $('.grid').imagesLoaded( function() {
        // init Masonry after all images have loaded
        $grid.masonry({
            // set itemSelector so .grid-sizer is not used in layout
            itemSelector: '.grid-item',
            // use element for option
            columnWidth: '.grid-sizer',
            percentPosition: true
        });
    });

Answer 1

听起来像

那里的答案建议添加：

body { overflow-y: scroll; }

同时在 http://jsfiddle.net/drw158/sAkjv/1/ 中添加：

display: block; 至 .ct-coll-item img { ... }

缩小了差距。（我认为这个想法来自 Vertical Gaps Appearing - jQuery Masonry - (seamless photo grid)）

否则可能会有帮助。

图像下方的砌体意外间距，直到调整大小

Masonry unintended spacing below images until resizing

javascript

html

css

jquery-masonry

masonry