Question

当我们定义一个砌体布局时，我们需要在javascript中指定 columnWidth 属性，如下所示：

$maincontent.masonry({
    columnWidth: 200,
    itemSelector: '.hentry',
    isFitWidth: true,
    isAnimated: true
});

然后在CSS中，我们无论如何都要定义列的宽度。因此，对于我的css for the masonry专栏，我有一个像这样的宽度定义：

#main article {
    margin: 0 20px 35px;
    width: 360px; /* Here I can give a width different than what I specified in javascript above */
    float: left;
}

并且砌体布局仍在进行，并使用我在css中指定的宽度。所以我不明白，在javascript中指定宽度的目的是什么？

Answer 1

所有选项都是可选的，但建议使用columnWidth和itemSelector。如果未设置columnWidth，则Masonry将使用第一个元素的外部宽度。

您甚至可以使用div在<{1}}标记内定义它们：

data-masonry-options

代替您的<div id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'>代码尝试使用Jquery更改columnWidth，您会发现这里的区别是 LIVE DEMO

或纠正您的data-masonry-options代码必须如此：

Jquery

如果$('#maincontent').masonry({ // <---- instead of $maincontent.masonry columnWidth: 200, itemSelector: '.hentry', isFitWidth: true, isAnimated: true });是一个类，请使用此选择器maincontent

砌体：columnWidth属性的目的是什么？

1 个答案: