reactjs - 如何使用 react 虚拟化制作响应式图像网格

Question

我正在尝试渲染响应式图像网格，其中可能包含不同大小的图像。听起来 Masonry 组件很适合这种情况，但不确定我是否能够使用这个 example在我的申请中？它看起来与它所在的地方完全耦合，我试图获取相关部分，但我无法开始工作。

此外，我尝试用 wizard 生成相关代码，并得到了这个样本:

    <AutoSizer>
  {({ height, width }) => (
    <CellMeasurer
      cellRenderer={yourCellRenderer}
      columnCount={numColumns}
      rowCount={numRows}
      width={width}
    >
      {({ getRowHeight }) => (
        <Grid
          cellRenderer={({ columnIndex, key, rowIndex, style }) => <div key={key} style={style}>...</div>}
          columnCount={numColumns}
          columnWidth={({ index }) => 100}
          height={height}
          rowCount={numRows}
          rowHeight={getRowHeight}
          width={width}
        />
      )}
    </CellMeasurer>
  )}
</AutoSizer>

但是我应该放什么来代替 yourCellRenderer，getRowHeight？

基于互联网上的一些示例，我构建了以下代码:

<div className="media-viewer" style={{height: "100vh"}}>
        <AutoSizer>
            {({height, width}) => (
                <Grid
                    cellRenderer={({columnIndex, key, rowIndex, style}) => {
                        if (!result[rowIndex][columnIndex]) return <div key={key} style={style}></div>;
                        return (
                            <div key={key} style={style}>
                                <MediaItem key={result[rowIndex][columnIndex].id} app={app}
                                           item={result[rowIndex][columnIndex]}/>
                            </div>
                        );
                    }}
                    columnCount={5}
                    columnWidth={250}
                    height={height}
                    rowCount={result.length}
                    rowHeight={250}
                    width={width}
                />
            )}
        </AutoSizer>
    </div>

显示在屏幕上的结果:

如果有人能够为我提供基于 react-virtualize 的响应式网格的强大示例，或者指出我可以改进当前代码的地方，我将不胜感激。

最好的问候。

Answer 1

从您附上的图片来看，您的图片似乎不是动态测量的。考虑添加 this图书馆

您需要添加类似 this 的内容:

const MasonryComponent = ({itemsWithSizes}) => {
  function cellRenderer({index, key, parent, style}) {
    const {item, size} = itemsWithSizes[index];
    const height = columnWidth * (size.height / size.width) || defaultHeight;

    return (
      <CellMeasurer cache={cache} index={index} key={key} parent={parent}>
        <div style={style}>
          <img
            src={item.image}
            alt={item.title}
            style={{
              height: height,
              width: columnWidth,
            }}
          />
          <h4>{item.title}</h4>
        </div>
      </CellMeasurer>
    );
  }

  return (
    <Masonry
      cellCount={itemsWithSizes.length}
      cellMeasurerCache={cache}
      cellPositioner={cellPositioner}
      cellRenderer={cellRenderer}
      height={600}
      width={800}
    />
  );
};

// Render your grid
render(
  <ImageMeasurer
    items={noCacheList}
    image={item => item.image}
    defaultHeight={defaultHeight}
    defaultWidth={defaultWidth}>
    {({itemsWithSizes}) => <MasonryComponent itemsWithSizes={itemsWithSizes} />}
  </ImageMeasurer>,
  document.getElementById('root'),
);

如果您愿意，可以添加一个包含您的代码的 fiddle 以供我(和社区)查看。

关于您关于yourCellRenderer 和getRowHeight 的问题；

cellRenderer

yourCellRenderer 应该调用一个函数，负责在任何给定索引处渲染单元格。它接受以下参数:

  index, // Index of item within the collection
  isScrolling, // The Grid is currently being scrolled
  key, // Unique key within array of cells
  parent, // Reference to the parent Grid (instance)
  style, // Style object to be applied to cell (to position it);
  // This must be passed through to the rendered cell element.

获取行高

您可以使用cache.rowHeight 来获取您的特定高度

如果您想要一个更有针对性的答案，请随时在您的代码中添加一个片段/ fiddle 。

亲切的问候