如何使用 react masonry 与 react-infinite-scroller？

Question

我有一个图片列表，这些图片将被无限滚动，当我到达页面底部时，加载更多的图片。

我已经使用了这个组件。https:/github.comCassetteRocksreact-infinite-scroller。

它对于一系列的图片来说非常好用。

下一步，我想做一个图片的网格，下面有一些文字。因此，方框的高度将是可变的。另外，如果能有一个网格就更好了，这样我就可以在一行上放多个框。

我如何使用react masonry (https:/github.comeiriklvreact-masonry-component。)或(https:/react.rocksexamplereact-infinite-grid。)来实现这个目的吗？ react-infinite-grid可以处理可变高度的块吗？

下面是我现在的代码片段。

        <InfiniteScroll
            pageStart={0}
            loadMore={this.props.onInfiniteLoad}
            hasMore={this.props.hasNextPage}
            loader={<div>{'Loading ...'}</div>}>
            {this.getSearchResultList()}
        </InfiniteScroll>

Answer 1

现在，我认为我们可以做到这一点。https:/www.npmjs.compackagereact-masonry-infinite)

演示页面

1. 安装

npm install --save react-masonry-infinite

2. 使用

import MasonryInfiniteScroller from 'react-masonry-infinite';

...
        <MasonryInfiniteScroller
            pageStart={0}
            loadMore={this.props.onInfiniteLoad}
            hasMore={this.props.hasNextPage}
            loader={<div>{'Loading ...'}</div>}>
            {this.getSearchResultList()}
        </MasonryInfiniteScroller>