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

淡淡的烟草味﹌ 2022-12-04 08:35 257阅读 0赞

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

--------------------

（图片存放路径：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>
        );
      }
    }

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/bb5c869d02c34043bc9cbd3e9ab2dd50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/da4d3bbd1601410daa1998611402a5ad.png