React-waterfall-plugin NPM

react版本自适应瀑布流布局

引入后使用WaterFall

npm下载

npm i react-waterfall-plugin

先调用getNum方法获取每列的盒子数目perPage
把每列的盒子数目调用后端接口获取对应的数据，eg:getData(perPage)
把后端传过来的数据放到list
下面是我写的一个小demo

import WaterFall from 'react-waterfall-plugin'

function App() {
  let arr: any = []
  // 子组件获取数据返回num
  const handleChildGetData = (num: number) => {
    getData(num)
  }
  // 获取数据的方法(后端分页获取。num是每次获取的数量)
  const getData = (num:number) => {
    for (let i = 0; i < num; i++) {

        // 模拟后端传过来的数据，在项目中直接调用后端就行
      arr.push(
        {
          img: 'https://img.keaitupian.cn/newupload/02/1675763150281920.jpg',
          title:`test${num}`
        }
      )
    }
  }
 
  return (
    <>
      <WaterFall getNum={handleChildGetData} list={arr} />
    </>
  )
}

export default App

效果演示

(http://8.138.112.139:9000/blogimg/1716997456182-202405292334 -big-original.gif)

参数说明

属性	说明	类型	默认值
list	需要使用的数据	Array<{img?: stringtitle?: string content?: string }>	null
gap_height	单元格上下间隔	number	90
range_height	图片的高度随机取值范围,默认150的范围是200-350,100是150-300,以此类推	number	150
getNum	获取num	(num: number) => void	null