Masonry - 如何首先水平排列不同宽度的 div，然后垂直排列？

【问题标题】：Masonry - How do I arrange varied width divs horizontally first then vertically?Masonry - 如何首先水平排列不同宽度的 div，然后垂直排列？
【发布时间】：2014-12-17 19:56:22
【问题描述】：

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

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

如何解决我的问题，让较小的 div 并排排列？

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

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

【问题讨论】：

标签： javascript masonry

【解决方案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*/
}

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

【讨论】：