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

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.

getRowHeight

您可以使用cache.rowHeight来获取您的具体身高

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

亲切的问候

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

How to make responsive image grid using react-virtualize

reactjs

react-masonry

react-virtualized

cellRenderer

getRowHeight