4.6 gallery圖片畫廊

實現類似照片牆的效果

文章目錄

• 4.6 gallery圖片畫廊
• @[toc]
• map舉例
• 一.Tabs元件
• 二.例項一
• 三. 升級版
• API[#](https://ant.design/components/message-cn/#API)
• Card[#](https://ant.design/components/card-cn/#Card)
• Card.Meta[#](https://ant.design/components/card-cn/#Card.Meta)

將resource資源下的gallery檔案拷貝到public資料夾下

public 下的檔案會最終部署到伺服器上,可以通過/絕對路徑去匹配檔案

map舉例

		var a = [1,2,3];
        var b = a.map(function (i) {return i*2})
        console.log(a);//[1,2,3]
        console.log(b);//[2,4,6]

一.Tabs元件

1.Tabs元件

• 引入Tabs:import { Card,Col,Row} from ‘antd’;
• 使用柵格佈局
• 定義二維陣列,儲存圖片

// src\pages\ui\gallery.js
import React from "react";
import { Card, Row, Col } from "antd";
export default class Gallery extends React.Component {
  render() {
    //定義二維陣列去存圖片
    //可以使用兩層迴圈(map),去定義  二維陣列

    /* 
        var a = [1,2,3];
        var b = a.map(function (i) {return i*2})
        console.log(a);//[1,2,3]
        console.log(b);//[2,4,6]
         */
 

    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 cover={<img src={"/gallery/" + item} />}>
        
        ...
        
        </Card>
      ))
    );
    return <div />;
  }
}

更靈活的內容展示

可以利用 Card.Meta 支援更靈活的內容。

二.例項一

區塊間隔

柵格常常需要和間隔進行配合，你可以使用 Row 的 gutter 屬性，我們推薦使用 (16+8n)px 作為柵格間隔。(n 是自然數)

如果要支援響應式，可以寫成 { xs: 8, sm: 16, md: 24, lg: 32 }。

• gutter:設定左右間隙
• style={{ marginBottom: 10}}:設定卡片上下間距
• <Card style={{ marginBottom: 10 }} cover={<img src={"/gallery/" + item} />}
• <Card.Meta/>

// src\pages\ui\gallery.js
import React from "react";
import { Card, Row, Col } from "antd";
export default class Gallery extends React.Component {
  render() {
    //定義二維陣列去存圖片
    //可以使用兩層迴圈(map),去定義  二維陣列

    /* 
        var a = [1,2,3];
        var b = a.map(function (i) {return i*2})
        console.log(a);//[1,2,3]
        console.log(b);//[2,4,6]
         */
    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} />}
        >
          <Card.Meta title="React Admin" description="I love Imooc" />
        </Card>
      ))
    );
    return (//一行5列
      <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>
      </div>
    );
  }
}

三. 升級版

• 新增 檢視大圖功能,將圖片放到 中

  • 新增事件onClick

  • 使用箭頭函式,傳遞 item

  • footer={null}: 關閉底部按鈕

  • width={300} height={500} : 設定Modal寬高

  • 通過設定visible,onCancel,改變Modal是否顯示,來實現圖片放大

  • openGallery = imgSrc => {//通過這個方法獲得圖片,彈出model
    
        };
    
    ... 
    <Card
              style={{ marginBottom: 10}}
              cover={<img src={"/gallery/" + item} 
              onClick={()=>this.openGallery(item)}/>}
            />
    ...              
    

// src\pages\ui\gallery.js
import React from "react";
import { Card, Row, Col, Modal } from "antd";
export default class Gallery extends React.Component {
  state = {
    visible: false
  };
  openGallery = imgSrc => {
    //通過這個方法獲得圖片,彈出model,將圖片儲存到,currentImg
    this.setState({
      visible: true,
      currentImg: "/gallery/"+ imgSrc
    });
  };
  render() {
    //定義二維陣列去存圖片
    //可以使用兩層迴圈(map),去定義  二維陣列

    /* 
        var a = [1,2,3];
        var b = a.map(function (i) {return i*2})
        console.log(a);//[1,2,3]
        console.log(b);//[2,4,6]
         */

    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 (
      //一行5列
      <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} style={{width:"100%"}}/>}
        </Modal>
      </div>
    );
  }
}

API#

Card#

Card.Meta#