砌体 - 如何在垂直方向上水平排列不同宽度的div？

Question

我有一系列div，其类名称为item（我有两个宽度类别）。两个是640px，其余是320px。我想先将它们水平排列，然后使用砌体库垂直排列。

当我运行以下初始化代码时，每个较小的div都不适合空白区域。与第一行相比，我无法使砌体适合不同数量的div。

如何解决我的问题，以便将较小的div并排？

这是我的初始化代码。如果需要，我可以发布更多代码来解决这个问题。

 $('#gridDiv').masonry({
                itemSelector: '.item',
                isAnimated: true,
                isFitWidth: true,
            });

Answer 1

我最终抓住了最新版本的Masonry并在下面应用了以下更改来解决问题。它现在有效。

参考：

http://masonry.desandro.com/options.html#columnwidth

如果未设置columnWidth，则Masonry将使用第一个元素的外部宽度。

在我的例子中，第一个元素的宽度是为什么所有其他元素都以我的问题中描述的方式分发的原因。

CSS

.small {
    width: 290px; /*This is the width of the small div element of the div I want to size according to*/
}

JS

       $('#gridDiv').masonry({
            itemSelector: '.item',
            columnWidth: '.small', //Reference the .small class selector to set width
            isAnimated: true,
            isFitWidth: true,
        });