react中的瀑布流代码实现

在 React 中实现瀑布流布局，可以使用第三方组件库，如 react-masonry-component 或 react-waterfall。

以 react-masonry-component 为例，首先需要安装该库：

npm install react-masonry-component --save

然后，你需要引入 Masonry 组件并使用它来展示元素。比如，你可以创建一个 Masonry 组件，将数据作为 props 传入，然后在组件中使用 map 方法来将数据渲染成瀑布流布局：

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

const masonryOptions = {
    transitionDuration: 0
};

const imagesLoadedOptions = { background: '.my-bg-image-el' }

const MasonryComponent = ({ data }) => (
  <Masonry
    className={'my-gallery-class'} // default ''
    elementType={'div'} // default 'div'
    options={masonryOptions} // default {}
    disableImagesLoaded={false} // default false
    updateOnEachImageLoad={false} // default false and works only if disableImagesLoaded is false
    imagesLoadedOptions={imagesLoadedOptions} // default {}
  >
    {data.map(item => (
      <div key={item.id} className="image-element-class">
        <img src={item.image} alt={item.title} />
        <div>{item.title}</div>
      </div>
    ))}
  </Masonry>
);

export default MasonryComponent;

这里，我们使用了 react-masonry-component 提供的 Masonry 组件，并传入了一些参数，比如瀑布流布局的配置项。然后，我们使用 map 方法将传入的数据渲染成瀑布流布局的元素。

最后，我们将 MasonryComponent 导出，可以在其他组件中引入并使用它来展示瀑布流布局。