react 基于antd 组件库实现图片墙

安装啥的就不说了。大家都会，直接上代码

---

（图片存放路径：public 下新建一个 gallery 文件夹，名字以 1.png’, ‘2.png’, ‘3.png’, ‘4.png’，命名）

---

import React from 'react'
import { Card, Row, Col, Modal } from 'antd'

export default class Gallery extends React.Component {

  state = {
    visible: false
  }

  openGallery = (imgSrc) => {
    this.setState({
      visible: true,
      currentImg: '/gallery/' + imgSrc
    })
  }
  render() {
    const imgs = [
      ['1.png', '2.png', '3.png', '4.png', '5.png'],
      ['6.png', '7.png', '8.png', '9.png', '10.png'],
      ['11.png', '12.png', '13.png', '14.png', '15.png'],
      ['16.png', '17.png', '18.png', '19.png', '20.png'],
      ['21.png', '22.png', '23.png', '24.png', '25.png']
    ]
    const imgList = imgs.map((list) => list.map((item) =>
      <Card
        style={{ marginBottom: 10 }}
        cover={<img src={'/gallery/' + item} onClick={() => this.openGallery(item)} />}
      >
        <Card.Meta
          title="React Admin"
          description="I Love Imooc"
        />
      </Card>
    ))
    return (
      <div className="card-wrap">
        <Row gutter={10}>
          <Col md={5}>
            {imgList[0]}
          </Col>
          <Col md={5}>
            {imgList[1]}
          </Col>
          <Col md={5}>
            {imgList[2]}
          </Col>
          <Col md={5}>
            {imgList[3]}
          </Col>
          <Col md={4}>
            {imgList[4]}
          </Col>
        </Row>
        <Modal
          width={300}
          height={500}
          visible={this.state.visible}
          title="图片画廊"
          onCancel={() => {
            this.setState({
              visible: false
            })
          }}
          footer={null}
        >
          {<img src={this.state.currentImg} alt="" style={{ width: '100%' }} />}
        </Modal>
      </div>
    );
  }
}

效果图