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*/