Question

我正在使用React石工库： 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;

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

Answer 1

解决方案：问题是我没有添加columnsWidth属性。因此，我创建了Options对象，并将columnWidth添加到最小的列宽，并且可以正常工作。

Answer 2

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

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

反应砌体项目对齐问题

2 个答案: