Question

我有一个无限滚动的图像列表，当我点击页面底部时，加载更多。

我使用过这个组件：https://github.com/CassetteRocks/react-infinite-scroller

它适用于一系列图像。

对于下一步，我想制作一个带有一些文字的图像网格。因此，盒子的高度将是可变的。另外，拥有一个网格会很棒，所以我可以在一行上放置多个盒子。

如何为此目的使用反应砌体（https://github.com/eiriklv/react-masonry-component）或（https://react.rocks/example/react-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.com/package/react-masonry-infinite）

Demo page

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>

如何使用反应无限卷轴反应砌体？

1 个答案: