javascript - 如何使用 React js 创建图像虚拟滚动

Question

我的要求是什么:我的外部文件夹中有一些图像，我需要导入到组件并显示它，并且还必须使用虚拟滚动，这里我必须在 div 和 in 中显示 1 行1 行必须显示 5-6 张图像

我做了什么:我使用外部文件夹中的上下文来使用图像，并在 div 中显示 1 行图像和 5-6 个图像，但我遇到了无法将其设置为虚拟滚动的问题

当我检查react-virtualized和react-window插件时，但我不确定我的数据如何以该格式使用

使用react-tiny-virtual-list后图像开始堆叠

下面是我的代码

class App extends React.Component{

  state={
    Response:[],

  }
  importAll(r) {
    return r.keys().map(r);
  }
  componentWillMount() {
    let data = this.importAll(require.context('./imageFolder/', false, /\.(png|jpe?g|svg)$/));
    this.setState({ Response:data})
  }





  render(){
    return(
      <div className="container" id="imagecontainer">
        <div className="viewport"> 
              {this.state.Response.map((image, index) =>    <img key={index} src={image} alt="info"></img>      )} }
           </div> 


      </div>
    )
  }


 .container {
      padding: 0% 6%;
      height: 400px;
    }
    .viewport {
      height: -webkit-fill-available;
      width: 100%;
      border: 1px solid black;
      overflow: scroll;
    }

img {
  height: 250px;
  width: 150px;
  padding: 35px;
}


After implementing React-tiny-list
 <div id="container">
      <div id="viewport">
      <VirtualList
    height='400px'
    width='100%'
    itemCount={this.state.items.length}
    itemSize={20} // Also supports variable heights (array or function getter)
    style={{padding:'20px'}}
    renderItem={({index, style}) =>
      <div key={index} style={style}> 

        <img key={index} src={this.state.items[index]} alt="info"></img>
      </div>
    }
  />
      </div>

    </div>

Answer 1

您还可以使用https://github.com/bvaughn/react-virtualized如果您想将其显示为表格，您可以选择列表，也可以选择网格。根据您的要求，我建议使用来自'react-virtualized'的Masonry;

下面是显示示例

import React from 'react';
import {
  CellMeasurer,
  CellMeasurerCache,
  createMasonryCellPositioner,
  Masonry
} from 'react-virtualized';

import 'react-virtualized/styles.css';

var images = [];
const columnWidth = 250;
const defaultHeight = 260;
const defaultWidth = columnWidth;

const cache = new CellMeasurerCache({
  defaultHeight,
  defaultWidth,
  fixedWidth: true
})

// Our masonry layout will use 3 columns with a 10px gutter between
const cellPositioner = createMasonryCellPositioner({
  cellMeasurerCache: cache,
  columnCount: 4,
  columnWidth,
  spacer: 27
})

function cellRenderer ({ index, key, parent, style }) {
  const datum = images[index]

  const height = columnWidth  ||  defaultHeight ;

  return (
    <CellMeasurer
      cache={cache}
      index={index}
      key={key}
      parent={parent}
    >
      <div style={style}>
        <img
          src={datum}
          style={{
            height: height,
            width: columnWidth,
            display: "block"
          }}
          alt="info"
        />

      </div>
    </CellMeasurer>
  )
}


class Grid extends React.Component{

  importAll(r) {
    return r.keys().map(r);
  }
  componentWillMount() {
    images = this.importAll(require.context('../imageFolder/', false, /\.(png|jpe?g|svg)$/));
  }
  render(){
    return(
      <div  id="container">
          <div id="viewport">

             <Masonry
            cellCount={images.length}
            cellMeasurerCache={cache}
            cellPositioner={cellPositioner}
            cellRenderer={cellRenderer}
            height={400}
            width={1320}

        />
          </div>

      </div>
    )
  }
}

export default Grid;

希望这能解决您的问题