react-waterfall-clover v1.0.5

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

colWidth

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

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