React Masonry 项目对齐问题答案

【问题标题】：React Masonry items alignment issueReact Masonry 项目对齐问题
【发布时间】：2019-10-27 05:13:57
【问题描述】：

我正在使用反应砌体库： https://www.npmjs.com/package/react-masonry-component 我添加了三个具有不同宽度/高度的项目： image

import React from 'react';
import Masonry from 'react-masonry-component';

const gridItems = [
    { width:"200px",height: "200px"},
    { width:"100px",height: "100px"},
    { width:"100px",height: "100px"}
].map((i, index) => {

    return <div className={`grid-item`} style={{width: i.width, height: i.height}}>
        <div style={{backgroundColor: 'green', height: '100%'}}>{index}</div>
    </div>;
})

const gridView = (props) => {

    return <div className="">
        <Masonry
            className={'masonry-view'}
           >
            {gridItems}
        </Masonry>
    </div>;
}

export default gridView;

问题在附加图像上可见 - 第三项未正确对齐。有谁知道解决办法吗？

【问题讨论】：

标签： reactjs masonry react-masonry

【解决方案1】：

解决方案：问题是我没有添加 columnsWidth 属性。所以我创建了 Options 对象并将 columnsWidth 添加到最小的列宽，它起作用了。

【讨论】：

你也可以编写一个可重用的组件来设置选项一次并使用它们

【解决方案2】：

要解决此问题，我只需将 columnWidth 修复为 1。

<Masonry
  options={{
     columnWidth: 1,
  }}
>
....
</Masonry>

【讨论】：