                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /React.JS
                        
                        /React實(shí)戰(zhàn)--打造畫(huà)廊應(yīng)用（上）

error Newline required at end of file but not found eol-last

按照【React實(shí)戰(zhàn)--打造畫(huà)廊應(yīng)用（上）】碼的上半部分代碼，抱一個(gè)錯(cuò)誤，在代碼的最后一行。求助！??！

代碼部分

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

// CSS
require('normalize.css');
require('../styles/main.scss');

// 獲取圖片相關(guān)的數(shù)據(jù)
var imageDatas = require('../data/imageDatas.json');

// 利用自執(zhí)行函數(shù)，將圖片名信息轉(zhuǎn)成圖片URL路徑信息
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);

/*
?* 獲取區(qū)間內(nèi)的一個(gè)隨機(jī)值
?*/
function getRangeRandom(low, high) {
return Math.ceil(Math.random() * (high - low) + low);
}

var ImgFigure = React.createClass({
render: function() {
return (
<figure className={imgFigureClassName} style={styleObj}>
<img src={this.props.data.imageURL}
alt={this.props.data.title}
/>
<figcaption>
<h2 className="img-title">{this.props.data.title}</h2>
<div className="img-back">
<p>
{this.props.data.desc}
</p>
</div>
</figcaption>
</figure>
);
}
});

var GalleryByReactApp = React.createClass({
Constant: {
centerPos: {
left: 0,
right: 0
},
hPosRange: { // 水平方向的取值范圍
leftSecX: [0, 0],
rightSecX: [0, 0],
y: [0, 0]
},
vPosRange: { // 垂直方向的取值范圍
x: [0, 0],
topY: [0, 0]
}
},
/*
* 重新布局所有圖片
* @param centerIndex 指定居中排布哪個(gè)圖片
*/
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), // 取一個(gè)或者不取
topImgSpliceIndex = 0,

imgsArrangeCenterArr = imgsArrangeArr.splice(centerIndex, 1);

// 首先居中 centerIndex 的圖片, 居中的 centerIndex 的圖片不需要旋轉(zhuǎn)
imgsArrangeCenterArr[0] = {
pos: centerPos,
rotate: 0,
isCenter: true
};

// 取出要布局上側(cè)的圖片的狀態(tài)信息
topImgSpliceIndex = Math.ceil(Math.random() * (imgsArrangeArr.length - topImgNum));
imgsArrangeTopArr = imgsArrangeArr.splice(topImgSpliceIndex, topImgNum);

// 布局位于上側(cè)的圖片
imgsArrangeTopArr.forEach(function(value, index) {
imgsArrangeTopArr[index] = {
pos: {
top: getRangeRandom(vPosRangeTopY[0], vPosRangeTopY[1]),
left: getRangeRandom(vPosRangeX[0], vPosRangeX[1])
},
rotate: get30DegRandom(),
isCenter: false
};
});

// 布局左右兩側(cè)的圖片
for (var i = 0, j = imgsArrangeArr.length, k = j / 2; i < j; i++) {
var hPosRangeLORX = null;

// 前半部分布局左邊，右半部分布局右邊
if (i < k) {
hPosRangeLORX = hPosRangeLeftSecX;
} else {
hPosRangeLORX = hPosRangeRightSecX;
}

imgsArrangeArr[i] = {
pos: {
top: getRangeRandom(hPosRangeY[0], hPosRangeY[1]),
left: getRangeRandom(hPosRangeLORX[0], hPosRangeLORX[1])
},
rotate: get30DegRandom(),
isCenter: false
};

}

if (imgsArrangeTopArr && imgsArrangeTopArr[0]) {
imgsArrangeArr.splice(topImgSpliceIndex, 0, imgsArrangeTopArr[0]);
}

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

this.setState({
imgsArrangeArr: imgsArrangeArr
});
},

getInitialState: function() {
return {
imgsArrangeArr: [
/*{
pos: {
left: '0',
top: '0'
},
rotate: 0, ? ?// 旋轉(zhuǎn)角度
isInverse: false, ? ?// 圖片正反面
isCenter: false, ? ?// 圖片是否居中
}*/
]
};
},

// 組件加載以后，為每張圖片計(jì)算其位置的范圍
componentDidMount: function() {

// 首先拿到舞臺(tái)的大小
var stageDOM = React.findDOMNode(this.refs.stage),
stageW = stageDOM.scrollWidth,
stageH = stageDOM.scrollHeight,
halfStageW = Math.ceil(stageW / 2),
halfStageH = Math.ceil(stageH / 2);

// 拿到一個(gè)imageFigure的大小
var imgFigureDOM = React.findDOMNode(this.refs.imgFigure0),
imgW = imgFigureDOM.scrollWidth,
imgH = imgFigureDOM.scrollHeight,
halfImgW = Math.ceil(imgW / 2),
halfImgH = Math.ceil(imgH / 2);

// 計(jì)算中心圖片的位置點(diǎn)
this.Constant.centerPos = {
left: halfStageW - halfImgW,
top: halfStageH - halfImgH
};

// 計(jì)算左側(cè)，右側(cè)區(qū)域圖片排布位置的取值范圍
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;

// 計(jì)算上側(cè)區(qū)域圖片排布位置的取值范圍
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(0);

},

render: function() {

var controllerUnits = [],
imgFigures = [];

imageDatas.forEach(function(value, index) {
if (!this.state.imgsArrangeArr[index]) {
this.state.imgsArrangeArr[index] = {
pos: {
left: 0,
top: 0
},
rotate: 0,
isInverse: false,
isCenter: false
};
}
imgFigures.push(<ImgFigure key={index} data={value} ref={'imgFigure' + index} arrange={this.state.imgsArrangeArr[index]} />);
// controllerUnits.push(<ControllerUnit key={index} arrange={this.state.imgsArrangeArr[index]} inverse={this.inverse(index)} center={this.center(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')); // jshint ignore:line

module.exports = GalleryByReactApp;