react-tiny-virtual-grid

虚拟列表 + 类似Grid布局

根据传入不同列数，调整元素位置

在此基础上可以做到当列数动态改变后，给元素的布局添加动画

Installation

    npm install react-tiny-virtual-grid

Usage

  <VirtualGrid
    dataSource={list}
    itemHeight={200}
    bufferSize={2}
    columns={columns}
  >
    {(item, [x, y], stop, index) => (
      <div
        key={index}
        style={{
          position: "absolute",
          left: `${x * 300}px`,
          top: `${y * 200}px`,
          width: 300,
          height: 200,
          transition: stop ? "all 300ms" : "unset"
        }}
      >
        {item}
      </div>
    )}
  </VirtualGrid>

Props

| 属性 | 说明 | 类型 | 默认值 | | ---------- | -------------- | ---------------------------------------------------------------------------------------------------------------------- | ------ | | dataSource | 渲染的数据 | any[] | - | | itemHeight | 每行元素的高度 | number | - | | bufferSize | 下方缓冲行数 | number | 0 | | columns | 列数 | number | - | | children | 渲染的函数 | (item: T,pos: [number, number],stop: boolean,index: number) => React.ReactElement | - |

注意

如果要实现动画效果，需要使用Render Props的参数index作为key

目前还没有想到好的方法来实现行数增加时也能进行动画效果。如果行数为1，这时候假如显示了4个元素，将行数变为2，元素从4个变为了8个，凭空新增的元素，没法做到动画。现在解决的想法是需要渲染一个固定长度的数组，这样需要传入一个最大行数，没想到好办法

TODO

• [ ] 完整缓冲区，防止闪屏
• [ ] 行数增加时也添加动画
• [ ] 动态元素高度