jquery 具有流体宽度选项的砌体项目 "collapsing"

Question

我写了一个 jsfiddle here，它显示了 jquery Masonry 布局，其中元素的静态宽度设置在 "brick" 布局中。似乎工作正常。

HTML:

<body>
<div id="container">
<div class="item">Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Etiam dignissim. Proin malesuada adipiscing lacus. Donec metus. Curabitur gravida.</div>
<div class="item">Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</div>
<div class="item">Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</div>
<div class="item">Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</div>    
<div class="item">Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</div>
</div>
</body>

CSS:

#container {
    width: 900px;
}

.item {
    background: green;
    box-shadow: inset 0 0 0 1px #fff; //to deliniate boxes
    float: left;
    width: 33.333%;
}

脚本：

$('#container').masonry({
itemSelector: '.item',
columnWidth: 300
});

根据 Masonry documentation, you can pass in a function to set a non-static column width to a fraction of the container's width. I wrote another jsfiddle here，用流体宽度函数代替静态宽度函数。函数是：

$('#container').masonry({
    itemSelector: '.item',
    columnWidth: function( containerWidth ) {
        return containerWidth / 3;
    }
});

如您所见，.item div "collapse" 相互重叠，因为砌体脚本将它们绝对定位，但不会像静态列宽版本那样添加任何顶部或左侧定位样式。我已经通过使用多种砌体方法和以不同顺序加载脚本尝试了数十次，每次都得到相同的结果。

我在这里错过了什么？？

Answer 1

根据文档 here。

，您可以只使用元素大小调整而不是使用列宽函数

所以不是这个：

$('#container').masonry({
    itemSelector: '.item',
    columnWidth: function( containerWidth ) {
        return containerWidth / 3;
    }
});

你可以使用这个：

$('#container').masonry({
  itemSelector: '.item',
  columnWidth: '.item'
});

然后在 css 中为 .item 使用百分比宽度，即

.item { width: 33.333%; }

Here's the jsfiddle

jquery 具有流体宽度选项的砌体项目 "collapsing"

jquery Masonry items "collapsing" with fluid width option

jquery

jquery-masonry

masonry