react-组件分享MasonryLayout瀑布流布局react-masonry-css

最新推荐文章于 2025-03-11 09:46:59 发布

月蚀～

最新推荐文章于 2025-03-11 09:46:59 发布

阅读量4.5k

点赞数 1

分类专栏： # react 文章标签： react.js css javascript

本文链接：https://blog.csdn.net/x308561498/article/details/122976866

版权

react 专栏收录该内容

1 篇文章

订阅专栏

本文展示了如何利用react-masonry-css库创建一个具备无限滚动加载功能的瀑布流布局。通过结合dummyjs生成模拟数据和react-infinite-scroller监听滚动事件，实现了内容的动态加载。在组件卸载时，防止状态更新，保证了应用的正常运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react-masonry-css

瀑布流布局

在视觉上表现为参差不齐的多栏布局，随着页面滚动条向下滚动，新数据不断被加载进来。
在这里插入图片描述

实现步骤

首先实现单独的内容展现
再次实现一组内容的瀑布流展现,比如20条
最后滚动不断加入新的内容

代码

react-masonry-css: 是一个以css响应实现的瀑布流布局
dummyjs: 随机模拟文本或图片
react-infinite-scroller: 滚动监听加载数据

import React, { Component } from 'react'
import _class from 'classnames'
import Dummy from 'dummyjs'
import InfiniteScroll from 'react-infinite-scroller'
import Masonry from 'react-masonry-css'
import { Button, Dropdown, Menu, Row, Card, Icon, Input } from 'antd'

const pageSize = 20
const mockData = (start) => {
  let datas = []
  let end = start + pageSize
  for (var i = start; i < end; i++) {
    let data = {}
    data.id = 'mock-' + i
    data.title = 'Card#' + i
    data.image = Dummy.src(500, 400)
    data.content = Dummy.text(20, 60)
    data.collapsed = true
    datas.push(data)
  }
  return datas
}
/**
 *
 * 瀑布流布局
 * @class MasonryLayoutExample
 * @extends {React.Component}
 */
class MasonryLayoutExample extends React.Component {
  state = {
    breakpointColumnsObj: {
      default: 5,
      1400: 4,
      1100: 3,
      700: 2,
      500: 1
    },
    hasMore: true,
    datas: []
  }

  UNSAFE_componentWillMount() {

  };
  componentWillUnmount() {
    this.setState = () => {
      return
    }
  }

  componentDidMount() {
    this.loadMoreData()
  }

  /**
   *
   * 加载数据
   * @memberof MasonryLayoutExample
   */
  loadMoreData = (page = 1) => {
    const { datas } = this.state
    if (datas.length >= 200) {
      console.log('加载完成')
      return false
    }
    let start = (page - 1) * pageSize + 1
    let newData = mockData(start)
    this.setState({ datas: [...datas, ...newData] })
  }
  /**
   *
   * 拦截数据变化
   * @param {*} datas
   * @memberof MasonryLayoutExample
   */
  handlerDataChange = (datas) => {
    console.log('操作datas==>', datas)
    this.setState({ datas })
  }

  renderContainer = (datas) => {
    return datas.map((item, key) => {
      /** body区域样式 */
      let defineBodyStyle = item.collapsed ? { padding: '15px' } : { padding: '0px' }
      /** 箭头旋转 */
      let caretRotate = item.collapsed ? 0 : 180
      return (
        <Card key={item.id} title={item.title} bordered={false}
          hoverable
          bodyStyle={defineBodyStyle}
          actions={[
            <Icon type='caret-up' key='caret-up' rotate={caretRotate}
              onClick={() => {
                item.collapsed = !item.collapsed
                this.handlerDataChange(datas)
              }}
            />,
            <Icon type='delete' key='delete' />,
            <Icon type='edit' key='ellipsis' />,
          ]}
        >
          {
            item.collapsed ? <React.Fragment>
              <div><img src={item.image} style={{ width: '100%' }} /></div>
              <div>{item.content}</div>
            </React.Fragment> : null
          }
        </Card>
      )
    })
  }

  render() {
    return (
      <React.Fragment>
        {/* 下拉加载 */}
        <InfiniteScroll
          initialLoad={false} // 不让它进入直接加载
          pageStart={1} // 设置初始化请求的页数
          loadMore={this.loadMoreData}
          hasMore={this.state.hasMore}
          useWindow // 监听 window 滚动条
        >
          {/* 瀑布流 */}
          <Masonry
            breakpointCols={this.state.breakpointColumnsObj}
            className='note-masonry-grid'
            columnClassName='note-masonry-grid_column'
          >
            {this.renderContainer(this.state.datas)}
          </Masonry>
        </InfiniteScroll>
      </React.Fragment >

    )
  }
}
export default MasonryLayoutExample