Question

我写了一个jsfiddle here，它显示了一个jquery Masonry布局，其中静态宽度用于在“砖块”布局中设置的元素。似乎工作得很好。

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

SCRIPT：

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

根据Masonry documentation，您可以传入一个函数，将非静态列宽设置为容器宽度的一小部分。我写了另一个jsfiddle here，流体宽度函数替换了静态宽度函数。功能是：

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

正如你所看到的，.item相互“崩溃”，因为砌体脚本绝对定位它们，但是没有像静态列宽版本那样添加任何顶部或左侧定位样式。我已经尝试了几十次，使用了几种砌体方法并按各种顺序加载脚本，每次都得到相同的结果。

我在这里缺少什么？

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砌体项目“折叠”与流体宽度选项

1 个答案: