react瀑布流布局代码

React瀑布流布局（也称为 Masonry 或 Grid Layout）通常使用第三方库如Masonry.js或react-masonry-component来实现，因为直接在React中处理复杂的网格布局比较复杂。以下是一个简化的示例，演示如何使用`react-masonry-component`：

首先，你需要安装依赖：

npm install react-masonry-component masonry-layout

然后，在React组件中使用它：

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

const MasonryLayout = ({ items }) => {
  return (
    <Masonry
      className="masonry"
      elementType="li" // 你可以改变这行，比如设置成div，看你的需求
      disableImagesLoaded={false}
      layout='fitRows'
      itemSelector=".grid-item"
      transitionTime={0} // 设置动画时间
    >
      {items.map((item) => (
        <li key={item.id} className="grid-item">
          <img src={item.image} alt={item.alt} />
          <p>{item.description}</p>
        </li>
      ))}
    </Masonry>
  );
};

// 然后在其他地方使用MasonryLayout组件，并传递数据
const data = [
  {/* 你的项目项数据 */}
];

function App() {
  return (
    <div>
      <MasonryLayout items={data} />
    </div>
  );
}

export default App;

在这个例子中，`items`数组应该包含每个网格项目的图片URL、alt文本和描述。`layout='fitRows'`表示按行填充，如果需要瀑布流效果，可以换成`layout='masonry'`。