Question

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

我摆弄的最后一件事可能已经破坏了它正在玩columnWidth，但是将它改回250则无法解决问题。

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

尝试使用此

修改容器ID css样式

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

Answer 2

如果您为其设置实际宽度，则不会使用窗口调整砌体。看起来你设置了砌体水平对齐的宽度。我建议您定义一个动态宽度范围，如下所示，并且砌体将按预期调整窗口大小。

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

这是jsfiddle demo

Answer 3

遇到了同样的问题，但是用另一种方式解决了-拥有以下代码：

<div class="my-gallery grid" data-masonry='{
   "itemSelector": ".grid-item",
   "columnWidth": 30,
   "fitWidth": true
}'>

已删除：

"fitWidth": true

砌体没有用窗户调整大小

3 个答案: