Jquery 砌体的线形问题

我知道这些砖石问题往往非常具体和繁琐。 这一次我被卡住了，不明白为什么最下面的一行没有一起浮动成一行

我在没有砌石的情况下得到了什么（只是向左浮动）：

我从砖石中得到的：

我所期望的是：

HTML JS 为了玩

---

有人有主意吗？

将列宽改为150

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

---

啊!！我懂了。如果列宽为300，则较小的图像必须至少占用这么多空间。。。谢谢非常感谢。。。

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

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

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

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