reactjs - 如何使用响应式网格（砌体）而不是列表来做 InfiniteLoder？

Question

我正在尝试使用带有网格而不是结果列表的InfiniteLoader https://bvaughn.github.io/react-virtualized/#/components/InfiniteLoader 。我尝试Masonery并设法将其设为默认页面宽度和高度。但是它也有（必需的）列号属性和列宽属性，我想使用响应式设计和 flex css 显示列，因此它可能是不同的列号，具体取决于屏幕大小。

有谁知道如何做到这一点Masonery？

我不太明白为什么这不能使用响应式 css 测量，而是我需要在脚本中定义它们。

这是我的组件：

                <InfiniteLoader
                  isRowLoaded={this._isRowLoaded}
                  loadMoreRows={this._loadMoreRows}
                  rowCount={filteredProducts.length}>
                  {({onRowsRendered, registerChild}) => (
                    <AutoSizer disableHeight> 
                      {({width}) => (
                        <Masonry
                            cellCount={filteredProducts.length}
                            cellMeasurerCache={cache}
                            cellPositioner={cellPositioner}
                            cellRenderer={this._celleRenderer}
                            onCellsRendered={onRowsRendered}
                            className="itineraries"
                            height={600}
                            width={width}
                        />
                      )}
                    </AutoSizer>
                  )}
                </InfiniteLoader>

我从这里获取的其余部分：https ://github.com/bvaughn/react-virtualized/blob/master/docs/Masonry.md

标签： reactjsinfinite-scrollmasonryreact-virtualized