如何使用 react-virtualized 制作响应式图像网格

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'),
);

如果您愿意，可以添加您的代码小提琴供我（和社区）查看。

关于你对yourCellRenderer和getRowHeight的问题；

细胞渲染器

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 获取您的具体身高

如果您想要更量身定制的答案，请随时在您的代码中添加 sn-p/fiddle。

亲切的问候