砌体未随窗口调整大小

无论窗口有多大,它似乎都会给我四行。以前,它会随着浏览器的缩小将项目移动到三行或更少。

我最后摆弄的东西,可能是玩坏了 columnWidth ,但将其改回250并不能解决问题。

JSFiddle

HTML格式

<div id="container" class="feed">
    <div class="item">a</div>
    <div class="item">b</div>
    <div class="item">c</div>
    <div class="item">d</div>
    <div class="item">e</div>
    <div class="item">f</div>
    <div class="item">g</div>
    <div class="item">h</div>
    <div class="item">i</div>
</div>

CSS格式

body {
    padding: 20px;
    background-color: #E9E9E9;
}

/* MASONRY */

.item {
    width: 250px;
    margin: 10px;
    /*float: left;*/
    background-color: #FFFFFF;
    border-radius: 3px;
    box-shadow: 0 2px 2px -2px gray;
}


#container {
    width: 1082px;
    margin: 0 auto;
    //border: 1px solid black;
}

.text {
    padding: 10px;
}

.image {
    /* border-radius: 10px; */
     border-bottom: 1px solid #e1e1e1;
    /* margin-top: 20px; */
    padding: 10px;
    //padding-top: 20px;
    //padding-bottom: 20px;
}

ul.list-inline {
    margin: 0;
}

li:last-child {
    float:right;
}

hr {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 0;
    border-top: 1px solid #e1e1e1;
    margin-left: -10px;
    margin-right: -10px;
}

.text-loader {
    text-align: center;
}

JS文件

$(document).ready(function () {
    /* MASONRY */

    var $container = $('#container');
    // initialize
    $container.masonry({
        columnWidth: 1,
        itemSelector: '.item'
    });
});