react-waterfall-clover

React图片瀑布流

特性

• 自定义节点渲染
• 自适应图片大小
• 缓冲高度

使用

yarn add react-waterfall

import { Random } from "mockjs";
import React, { useMemo } from "react";
import "./app.css";
import { Waterfall } from "react-waterfall-clover";

export default function App() {
  const source = useMemo(
    () =>
      Array(30)
        .fill("")
        .map((_, i) => ({
          url: Random.image(
            `${Math.floor(Math.random() * 300)}x${Math.floor(
              Math.random() * 300
            )}`
          ),
        })),
    []
  );
  console.log("source",source);
  
  return (
    <>
      <Waterfall
        className="container"
        col={2}
        dataSource={source}
        colWidth={0}
        onScroll={(e) => {
          console.log("滚动", e);
        }}
        renderItem={(item, index) => (
          <div>
            <img src={item.url} key={index} alt={item} />
            <div>
              <span>666666</span>
            </div>
          </div>
        )}
      />
    </>
  );
}

props

| prop | 类型 | 默认 | 必要 | 描述 | | --------------- | ------------------------------------------ | ------- | ----- | -------------------- | | dataSource | any[] | [] | true | 数据源 | | col | number | 3 | false | 列数 | | fieldName | string | url | false | 图片字段名 | | colWidth | number | 自适应 | false | 列宽度，默认根据列数自适应宽度 | | space | number | number[] | 10 | false | 间隙 | | extraItemHeight | number | 0 | false | item额外参与计算高度 | | renderItem | (item: any, index: number) => JSX.Element | - | false | 自定义节点 | | onScroll | HTMLDivElement | - | false | 容器滚动事件 |

colWidth

单列宽度不传，默认自动计算宽度

注： 请不要在 Waterfall 设置 padding 和 margin 会影响列宽的计算准度