移动端瀑布流图文展示React

import React, { useEffect, useState } from "react"
//@ts-ignore
import style from "./index.module.less"
import { Tabs, List } from "react-vant"
import { TabsKindsArr, IUserData } from "./constant"
import { LikeO } from "@react-vant/icons"
import Macy from "macy"
import axios from "axios"
import MyLoading from "@/components/Loading"

export const Find: React.FC = () => {
  const [active, SetActive] = useState("TJ")
  const [visible, setVisible] = useState(false)
  const [mylist, setmylist] = useState<IUserData[]>([])
  const [macy, SetMacy] = useState<any>(null)

  useEffect(() => {
    InitMacy()
  }, [mylist])

  const debounce = (fn: any, time: number) => {
    let timeout: any = null
    return () => {
      clearTimeout(timeout)
      timeout = setTimeout(() => {
        fn()
      }, time)
    }
  }

  const getList = () => {
    if (visible) return
    setVisible(true)
    axios
      .get(
        "https://www.fastmock.site/mock/e691a0e4c13d795a0ad56c0ad6f279d7/api/api/list"
      )
      .then(res => {
        setmylist((list: IUserData[]) => {
          return [...list, ...res.data.data]
        })
        setVisible(false)
      })
  }
  useEffect(() => {
    getList()
  }, [])

  const handleTabsChange = (key: any) => {
    SetActive(key)
    getList()
    macy.reInit()
  }

  const InitMacy = () => {
    if (!macy) {
      SetMacy(
        new Macy({
          container: "#macy-container",
          trueOrder: false,
          mobileFirst: true,
          waitForImages: false,
          margin: { x: 10, y: 10 },
          columns: 2 // 设置列数
        })
      )
    } else {
      macy.runOnImageLoad(function () {
        macy.reInit()
      }, true)
      // runOnImageLoad 这个方法 第二个参数为true 表示图片每一张加载都会执行 这样就不会有排版的的闪烁问题
    }
  }

  return (
    <>
      <Tabs
        active={active}
        className={style.TabsForScroll}
        onChange={handleTabsChange}
      >
        {TabsKindsArr.map((item, index) => (
          <Tabs.TabPane
            name={item.value}
            key={index}
            title={`${item.name}`}
          ></Tabs.TabPane>
        ))}
      </Tabs>
      <div className={style.mainList}>
        <List
          onLoad={debounce(() => {
            getList()
          }, 500)}
          finished={false}
          finishedText={"没有更多了～"}
          offset={200}
        >
          <div id="macy-container">
            {mylist.map((it, index) => {
              return (
                <div key={index} className={style.item}>
                  <img src={it.imgSrc} alt="" />
                  <div className={style.footer}>
                    <div>
                      <span className={style.spanclass}>{it.content}</span>
                    </div>
                    <div className={style.footerMainBom}>
                      <div className={style.footerLeft}>
                        <img src={it.userSrc} alt="" />
                        <span style={{ marginLeft: "5px" }}>{it.name}</span>
                      </div>
                      <div className={style.footerRight}>
                        <LikeO className={style.heart} />
                        <span>{it.num}</span>
                      </div>
                    </div>
                  </div>
                </div>
              )
            })}
          </div>
        </List>
      </div>
      <MyLoading visible={visible}></MyLoading>
    </>
  )
}

瀑布流移动端丝滑体验React