砌体的对齐问题

Question

我知道这些砌体问题往往非常具体和繁琐。 这次我卡住了，不明白为什么底行没有一起浮动成一行。

没有砖石的我得到了什么（只是向左浮动）：

我得到的砖石：

我的期望：

HTML

<ul class="js-tiles tiles">
    <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/300/190/" class="tiles-img"></a></li>
    <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/300/400/" class="tiles-img"></a></li>
    <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/300/400/" class="tiles-img"></a></li>
    <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/300/190/" class="tiles-img"></a></li>
    <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/130/190/" class="tiles-img"></a></li>
    <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/130/190/" class="tiles-img"></a></li>
    <li class="js-tiles-item tiles-ite"><a href="#" class="tiles-link"><img src="http://lorempixel.com/300/190/" class="tiles-img"></a></li>
    <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/130/190/" class="tiles-img"></a></li>
    <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/130/190/" class="tiles-img"></a></li>
</ul>

CSS

.tiles {
    display: block;
    width: 1150px;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}
.tiles .tiles-item {
    padding: 0;
    margin: 0 0 20px 0;
    display: inline-block;
    overflow: hidden;
    background-color: #ff69b4;
    font-size: 0;
}
.tiles .tiles-item .tiles-img {
    max-width: 100%;
}

JS

$(function() {
    var $tiles = $('.js-tiles');
    var options = {
        itemSelector: '.js-tiles-item',
        columnWidth: 300,
        gutter: 20
    };

    $tiles.imagesLoaded( function() {
        $tiles.masonry(options);
    });
});

CodePen 玩

有人有想法吗？

Answer 1

将 columnWidth 更改为 150

var options = {
        itemSelector: '.js-tiles-item',
        columnWidth: 150,
        gutter: 20
    };