代碼如下：

'use strict';

var React = require('react/addons');

// CSS

require('normalize.css');

require('../styles/main.scss');

//get images data

var imageDatas = require('../data/imageDatas.json');

//transfer images info to images URL by self-excutive function

imageDatas = (function genImageURL(imageDatasArr) {

for (var i = 0, j = imageDatasArr.length; i < j; i++) {

var singleImageData = imageDatasArr[i];

singleImageData.imageURL = require('../images/' + singleImageData.fileName);

imageDatasArr[i] = singleImageData;

}

return imageDatasArr;

})(imageDatas);

/*

?*get a random value between low and high

?*/

function getRangeRandom(low, high) {

return Math.ceil(Math.random() * (high - low) + low);

}

var ImgFigure = React.createClass({

render: function() {

var styleObj = {};

// if pos in props, use pos

if (this.props.arrange.pos) {

styleObj = this.props.arrange.pos;

}

return (

<figure className="img-figure" style={styleObj}>

<img src={this.props.data.imageURL} alt={this.props.data.title}/>

<figcaption>

<h2 className="img-title">{this.props.data.title}</h2>

</figcaption>

</figure>

);

}

});

var GalleryByReactApp = React.createClass({

Constant: {

centerPos: {

left: 0,

top: 0

},

hPosRange: {

leftSecX: [0, 0],

rightSecX: [0, 0],

y: [0, 0]

},

vPosRange: {

x: [0, 0],

topY: [0, 0]

}

},

getInitialState: function() {

return {

imgsArrangeArr: []

};

},

/*relocate image

*@param centerIndex indicate image which loacted in the center of stage

*

*/

rearrange: function(centerIndex) {

var imgsArrangeArr = this.state.imgsArrangeArr,

Constant = this.Constant,

centerPos = Constant.centerPos,

hPosRange = Constant.hPosRange,

vPosRange = Constant.vPosRange,

hPosRangeLeftSecX = hPosRange.leftSecX,

hPosRangeRightSecX = hPosRange.rightSecX,

hPosRangeY = hPosRange.y,

vPosRangeTopY = vPosRange.topY,

vPosRangeX = vPosRange.x,

imgsArrangeTopArr = [],

topImgNum = Math.floor(Math.random() * 2),

topImgSpliceIndex = 0,

imgsArrangeCenterArr = imgsArrangeArr.splice(centerIndex, 1);

//locate image which index is centerIndex in the center position

imgsArrangeCenterArr[0].pos = centerPos;

//get image state info which will be located in top area

topImgSpliceIndex = Math.ceil(Math.random() * (imgsArrangeArr.length - topImgNum));

imgsArrangeTopArr = imgsArrangeArr.splice(topImgSpliceIndex, topImgNum);

//locate image in top Area

imgsArrangeTopArr.forEach(function(value, index) {

imgsArrangeTopArr[index].pos = {

top: getRangeRandom(vPosRangeTopY[0], vPosRangeTopY[1]),

left: getRangeRandom(vPosRangeX[0], vPosRangeX[1])

};

});

//locate image in left or right area

for (var i = 0, j = imgsArrangeArr.length, k = j / 2; i < j; i++) {

var hPosRangeLORX = null;

//front half part in left side, end half part in right side

if (i < k) {

hPosRangeLORX = hPosRangeLeftSecX;

} else {

hPosRangeLORX = hPosRangeRightSecX;

}

imgsArrangeArr[i].pos = {

top: getRangeRandom(hPosRangeY[0], hPosRangeY[1]),

left: getRangeRandom(hPosRangeLORX[0], hPosRangeLORX[1])

};

if (imgsArrangeTopArr && imgsArrangeTopArr[0]) {

imgsArrangeArr.splice(topImgSpliceIndex, 0, imgsArrangeTopArr[0]);

}

imgsArrangeCenterArr.splice(centerIndex, 0, imgsArrangeCenterArr[0]);

this.setState({

imgsArrangeArr: imgsArrangeArr

});

}

},

//after image mounted, caculate position range for every image

componentDidMount: function() {

//get stage size

var stageDOM = React.findDOMNode(this.refs.stage),

stageW = stageDOM.scrollWidth,

stageH = stageDOM.scrollHeight,

halfStageW = Math.ceil(stageW / 2),

halfStageH = Math.ceil(stageH / 2);

//get imgFigure size

var imgFigureDOM = React.findDOMNode(this.refs.imgFigure0),

imgW = imgFigureDOM.scrollWidth,

imgH = imgFigureDOM.scrollHeight,

halfImgW = Math.ceil(imgW / 2),

halfImgH = Math.ceil(imgH / 2);

// caculate center image position

this.Constant.centerPos = {

left: halfStageW - halfImgW,

top: halfStageH - halfImgH

};

//caculate the range of images' location in left and right section

this.Constant.hPosRange.leftSecX[0] = -halfImgW;

this.Constant.hPosRange.leftSecX[1] = halfStageW - halfImgW * 3;

this.Constant.hPosRange.rightSecX[0] = halfStageW + halfImgW;

this.Constant.hPosRange.rightSecX[1] = stageW - halfImgW;

this.Constant.hPosRange.y[0] = -halfImgH;

this.Constant.hPosRange.y[1] = stageH - halfImgH;

//caculate the range of images' location in top section

this.Constant.vPosRange.topY[0] = -halfImgH;

this.Constant.vPosRange.topY[1] = halfStageH - halfImgH * 3;

this.Constant.vPosRange.x[0] = halfStageW - imgW;

this.Constant.vPosRange.x[1] = halfStageW;

this.rearrange(2);

},

render: function() {

var controllerUnits = [];

var imgFigures = [];

imageDatas.forEach(function(value, index) {

if (!this.state.imgsArrangeArr[index]) {

this.state.imgsArrangeArr[index] = {

pos: {

left: 0,

top: 0

}

};

}

imgFigures.push(<ImgFigure data={value} ref={'imgFigure' + index} arrange={this.state.imgsArrangeArr[index]}/>);

}.bind(this));

return (

<section className="stage" ref="stage">

<section className="img-sec">

{imgFigures}

</section>

<nav className="controller-nav">

{controllerUnits}

</nav>

</section>

);

}

});

React.render(<GalleryByReactApp/>, document.getElementById('content'));

module.exports = GalleryByReactApp;