GalleryByReact

Gallery By React

根据慕课网教程写的React练手小项目：

• index.js

  import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import Data from './data/imgData.json'
  
  //创建图片组件
   class ImgFigure  extends React.Component {
      constructor(props) {
          super(props);
          this.handleClick = this.handleClick.bind(this);//如果在调用handleClick方法后面加（），应该为其绑定this
      }
  
      handleClick(e) {//如果图片居中了就翻转，未居中则居中
          if (this.props.arrange.isCenter) {
              this.props.inverse();
          } else {
              this.props.center();
          }
          e.stopPropagation();//终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播
          e.preventDefault();//阻止点击事件的默认行为
      }
  
      render() {
          var styleObj = {};
          //如果props属性中指定了这张图片的位置,则使用
          if (this.props.arrange.pos) {
              styleObj.left = this.props.arrange.pos.left;
              styleObj.top = this.props.arrange.pos.top;
          }
  
          //如果图片的旋转角度有值并且不为0，添加旋转角度
          if (this.props.arrange.rotate) {
              (['Moz', 'Ms', 'Webkit', '']).forEach((value) => {
                  styleObj[value + 'Transform'] = 'rotate(' + this.props.arrange.rotate + 'deg)';
              });
          }
          //如果图片居中，则设置zIndex使其在最上层
          if (this.props.arrange.isCenter) {
              styleObj.zIndex = 11;
          }
          //如果图片翻转，则添加“is-inverse”类
          let imgFigureClassName = 'img-figure';
          imgFigureClassName += this.props.arrange.isInverse ? ' is-inverse ' : '';
  
          return (
              <figure style={styleObj} className={imgFigureClassName} onClick={this.handleClick}>
                  <img src={this.props.data.imgUrl}
                   alt={this.props.data.title}/>
                  <figcaption>
                  <h2 className='img-title'>{this.props.data.title}</h2>
                  </figcaption>
                  <div className="img-back" onClick={this.handleClick}>
                      <p>
                          {this.props.data.desc}
                      </p>
                  </div>
              </figure>
          );
      }
  
   }
  
   //控制结构组件（思路基本与imgFigure相同）
   class ControllerUnit extends React.Component {   
      constructor(props) {
          super(props);
          this.handleClick = this.handleClick.bind(this);
      }
  
      handleClick(e) {
          if (this.props.arrange.isCenter) {
              this.props.inverse();
          } else {
              this.props.center();
          }
          e.preventDefault();
          e.stopPropagation();
      }
  
      render() {
          var ControllerUnitClassName = 'controllerUnit';
          if (this.props.arrange.isCenter) {
              ControllerUnitClassName += ' is-center';
          }
  
          if (this.props.arrange.isInverse) {
              ControllerUnitClassName += ' is-inverse';
          }
  
      return (
               <span className={ControllerUnitClassName} onClick={this.handleClick}></span>
          );
      }
  }
  
  //背景舞台组件
  class Stage extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              //构建图片信息数组包括位置，角度，是否翻转和居中
              imgInfoArr: [
                  {
                      pos: {
                          left: '0',
                          top: '0'
                      },
                      rotate:0,
                      isInverse:false,
                      isCenter:false
                  }
              ]   
          };
          //内部变量：记录中心位置、水平垂直方向取值范围
          this.Constant = {
                  centerPos: {
                      left: 0,
                      top: 0
                  },
                  hPosRange: { //水平方向取值范围
                      leftSecX: [0, 0],
                      rightSecX: [0, 0],
                      y: [0, 0]
                  },
                  vPosRange: { //垂直方向取值范围
                      x: [0, 0],
                      topY: [0, 0]            
                  }
              };
          }
  
      //组件加载以后，为每张图片加载位置的范围
      componentDidMount() {
          //分别获取舞台和图片组件的宽高
          var stageDOM = ReactDOM.findDOMNode(this.refs.stage),
              stageH = stageDOM.scrollHeight,
              stageW = stageDOM.scrollWidth,
              halfStageH = Math.ceil(stageH / 2),
              halfStageW = Math.ceil(stageW / 2);
  
          var imgFigureDOM = ReactDOM.findDOMNode(this.refs.imgFigure0),
              imgH = imgFigureDOM.scrollHeight,
              imgW = imgFigureDOM.scrollWidth,
              halfImgH = Math.ceil(imgH / 2),
              halfImgW = Math.ceil(imgW / 2);
  
  
          this.Constant = {
              //计算取值范围并赋值给Constant
                  centerPos: {
                      left: halfStageW - halfImgW,
                      top: halfStageH - halfImgH + 50
                  },
                  hPosRange: { //水平方向取值范围
                      leftSecX: [-halfImgW, halfStageW - halfImgW * 3],
                      rightSecX: [halfStageW + halfImgW, stageW - halfImgW],
                      y: [-halfImgH, stageH - halfImgH]
                  },
                  vPosRange: { //垂直方向取值范围
                      x: [halfStageW - imgW, halfStageW],
                      topY: [-halfImgH, halfStageH - halfImgH * 3]            
                  }
              };
          //加载完成后进行布局
          this.setPosition(0);
  
      }
      //获取low、high之间的随机值
      getRandomValue(low, high) {
          return Math.ceil(Math.random() * (high - low) + low);
      }
      //获取正负30之间的随机值
      get30DeRandom() {
          return (Math.random() > 0.5 ? "" : '-') + Math.ceil(Math.random() * 30);
      }
      //翻转
      inverse(index) {
          return function () {
              var imgInfoArr = this.state.imgInfoArr;
              imgInfoArr[index].isInverse = !imgInfoArr[index].isInverse;
              this.setState({
                  imgInfoArr:imgInfoArr
              });
          }.bind(this);
      }
      //居中
      center(index) {
          return () => {
              this.setPosition(index);
          }
      }
      //设置图片位置，centerIndex是居中图片的索引值
      setPosition(cneterIndex) {
          var centerPos = this.Constant.centerPos,
              hLeftXMin = this.Constant.hPosRange.leftSecX[0],
              hLeftXMax = this.Constant.hPosRange.leftSecX[1],
              hRightXMin = this.Constant.hPosRange.rightSecX[0],
              hRightXMax = this.Constant.hPosRange.rightSecX[1],
              hYMin = this.Constant.hPosRange.y[0],
              hYMax = this.Constant.hPosRange.y[1],
              vXMin = this.Constant.vPosRange.x[0],
              vXMax = this.Constant.vPosRange.x[1],
              vYMin = this.Constant.vPosRange.topY[0],
              vYMax = this.Constant.vPosRange.topY[1];
  
          var imgInfoArr = this.state.imgInfoArr;
          //获取居中图片并设置其值
          var cneterArr = imgInfoArr.splice(cneterIndex, 1);
          cneterArr[0].pos = centerPos;
          cneterArr[0].rotate = 0;
          cneterArr[0].isCenter = true;
  
          //获取在上方的图片（0或1个）
          var topImgNum = Math.floor(Math.random() * 2);
          var topIndex = Math.ceil(Math.random() * (imgInfoArr.length - topImgNum));
          var topArr = imgInfoArr.splice(topIndex, topImgNum);
              topArr.forEach(function(element, index) {
              topArr[index] = {
                  pos: {
                      left: this.getRandomValue(vXMin, vXMax),
                      top: this.getRandomValue(vYMin, vYMax)
                  },
                  rotate:this.get30DeRandom(),
                  isCenter:false,
              }
          }.bind(this));
          //将剩下的图片对半分放于左右两边
          for (let i = 0, j = imgInfoArr.length, k = j / 2; i < j; i++) {
              var hPosLOrR = null;
              if (i < k) {
                  hPosLOrR = this.getRandomValue(hLeftXMin, hLeftXMax);
              } else {
                  hPosLOrR = this.getRandomValue(hRightXMin, hRightXMax);
              }
              imgInfoArr[i] = {
                  pos: {
                      left:hPosLOrR,
                      top:this.getRandomValue(hYMin, hYMax)
                  },
                  rotate: this.get30DeRandom(),
                  isCenter:false,
              };
          }
          //按顺序将顶部与中心图片数据传回数组
          if (topArr && topArr[0]) {
              imgInfoArr.splice(topIndex, 0, topArr[0]);
          }
          imgInfoArr.splice(cneterIndex, 0, cneterArr[0]);
  
          this.setState({
              imgInfoArr:imgInfoArr
          });
      }
  
      render() {
          var imgs = [];
          var controllers = [];
          Data.forEach( function(value, index) {
              //初始化图片数据数组，不能用setState方法，否则每次都会触发渲染
              if (!this.state.imgInfoArr[index]) {
                  this.state.imgInfoArr[index] = {
                      pos: {
                          left: 0,
                          top: 0
                      },
                      rotate: 0,
                      isInverse: false,
                      isCenter:false      
                  }
              }
              value.imgUrl = require('./images/' + value.fileName);
              imgs.push(<ImgFigure arrange={this.state.imgInfoArr[index]} key={index} ref={'imgFigure' + index} data={value} inverse={this.inverse(index)} center={this.center(index)}/>);
              controllers.push(<ControllerUnit key={index} arrange={this.state.imgInfoArr[index]} inverse={this.inverse(index)} center={this.center(index)} />)
          }.bind(this));
  
          return (
              <section className="stage" ref='stage'>
                  <section className="imgStage">{imgs}</section>
                  <nav className="controller">{controllers}</nav>
              </section>
          );
      }
  }
  
  ReactDOM.render(<Stage />, document.getElementById('root'));  
  

• index.css

  @font-face {font-family: "iconfont";
    src: url("./fonts/icons/iconfont.eot") format("embedded-opentype"), url("./fonts/icons/iconfont.woff") format("woff"), url("./fonts/icons/iconfont.ttf") format("truetype"), url("./fonts/icons/iconfont.svg") format("svg");
  }
  
  html, body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background-color: #ddd;
  }
  
  #root {
      width: 100%;
      height: 100%;
  }
  /*Stage start*/
  .stage {
      position: relative;
      width: 100%;
      height: 828px;
  
  }
  
  .imgStage {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: #ddd;
      perspective: 1800px;
      overflow: hidden;
  }
  /*Stage end*/
  /*imgFigure start*/
  .img-figure {
      position: absolute;
      height: 347px;
      width: 480px;
      margin: 0;
      padding: 40px;
      box-sizing: border-box;
      background-color: #FFF;
      cursor: pointer;
      transform-style: preserve-3d;
      transition: left .6s ease-in-out, top .6s ease-in-out, transform .6s ease-in-out;
      transform-origin: 0 50% 0;
  }
  .img-figure.is-inverse {
      transform: translate(480px) rotateY(180deg);
  }
  .img-back {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      padding: 40px;
      overflow: auto;
      color: #a7a0a2;
      font-size: 22px;
      line-height: 1.25;
      text-align: left;
      background-color: #FFF;
      box-sizing: border-box;
  
      backface-visibility: hidden;
      transform: rotateY(180deg);
  }
  .img-back p {
      margin: 0;
  }
  figcaption {
      text-align: center;
  }
  .img-title {
      margin-top: 10px;
      color: #a7a0a2;
      font-size: 16px;
  }
  /*imgFigure end*/
  /*controllerUnit start*/
  .controller {
      position: absolute;
      left: 0;
      bottom: 30px;
      z-index: 101;
      width: 100%;
      text-align: center;
  }
  .controllerUnit {
      display: inline-block;
      width: 30px;
      height: 30px;
      margin: 0 5px;
      text-align: center;
      cursor: pointer;
      background-color: #aaa;
      border-radius: 50%;
      transform: scale(.5);
      vertical-align: middle;
      transition: transform .6s ease-in-out, background-color .3s;
  }
  .controllerUnit.is-center {
      background-color: #888; 
      transform: scale(1);
  }
  .controllerUnit.is-center::after {
      font-family: 'iconfont';
      content: "\e515";
      color: #fff;
      line-height: 30px;
      font-size: 80%;
  }
  .controllerUnit.is-center.is-inverse {
      background-color: #555;
      transform: rotateY(180deg);
  }
  /*controllerUnit end*/