Javascript 砌体-如何先水平排列不同宽度的分隔缝,然后垂直排列?

Javascript 砌体-如何先水平排列不同宽度的分隔缝,然后垂直排列?,javascript,masonry,Javascript,Masonry,我有一系列的div,它们的类名叫做item,我有两个宽度类别。两个是640像素,其余是320像素。我想先使用砌体库水平排列,然后垂直排列 当我运行以下初始化代码时,每个较小的div都不适合在空白处。与第一排相比,我无法使砌体适合不同数量的div 如何解决问题,使较小的div并排出现 这是我的初始化代码。如果需要解决这个问题,我可以发布更多的代码 $('#gridDiv').masonry({ itemSelector: '.item',

我有一系列的div,它们的类名叫做item,我有两个宽度类别。两个是640像素,其余是320像素。我想先使用砌体库水平排列,然后垂直排列

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

如何解决问题,使较小的div并排出现

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

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

最后,我抓取了最新的砖石结构,并应用下面的更改来解决这个问题。现在可以了

引用自:

如果未设置columnWidth,则砌体将使用第一个图元的外部宽度

在我的例子中,第一个元素的宽度是所有其他元素以我的问题中描述的方式分布的原因

CSS

JS

.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,
        });