javascript - 砌体不随窗口调整大小

Question

无论窗口有多大，它似乎都致力于提供我的四行。以前，随着浏览器缩小，它会将元素移动到三行或更少。

我摆弄的最后一件事可能已经破坏了它是在玩 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'
    });
});

Answer 1

如果您为其设置了实际宽度，则砌体不会随窗口调整大小。似乎您设置了砖石水平对齐的宽度。我建议您定义一个动态宽度范围，如下所示，砌体将按预期随窗口调整大小。

#container{
  max-width: 1024px;
  min-width: 960px;
  margin: 0 auto;
}

这是一个jsfiddle demo