require('normalize.css/normalize.css');

require('styles/App.scss');

import React from 'react';

//獲取圖片數(shù)據(jù)

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

//利用自執(zhí)行函數(shù) 把圖片名轉成圖片URL

imageDatas = (function genImageURL(imageDatasArr){

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

? ? let singleImageData = imageDatasArr[i];

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

? ? imageDatasArr[i] = singleImageData;

? }

? return imageDatasArr;

})(imageDatas);

//獲取區(qū)間內的一個隨機值

function getRangeRandom(low,high){

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

}

class ImgFigure extends React.Component{

? constructor(props){

? ? super(props);

? ? let styleObj = {};

? ? //如果props屬性中指定了這張圖片的位置，則使用

? ? if(this.props.arrange.pos){

? ? ? styleObj = this.props.arrange.pos;

? ? ? console.log(styleObj);

? ? }

? }

? imgClick(event) {?

? ? console.log("執(zhí)行imgClick事件");

? ? console.log(this.state);

? }

? render(){

? ? return (

? ? ? ? <figure className="img-figure"? onClick={this.imgClick} style={this.styleObj}>

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

? ? ? ? ? <figcaption>

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

? ? ? ? ? </figcaption>

? ? ? ? </figure>

? ? ? );

? }

}

class AppComponent extends React.Component {

? constructor(){

? ? super();

? ? const Constent= {

? ? ? centerPos:{

? ? ? ? left:0,

? ? ? ? top:0

? ? ? },

? ? ? hPosRange:{//水平方向的取值范圍

? ? ? ? leftSecX:[0,0],

? ? ? ? rightSecX:[0,0],

? ? ? ? y:[0,0]

? ? ? },

? ? ? vPosRange:{//垂直方向的取值范圍

? ? ? ? x:[0,0],

? ? ? ? topY:[0,0]

? ? ? }

? ? };

? ? this.imgsArrangeArr = [

? ? ? // {

? ? ? //? ?pos:{

? ? ? //? ? ?left:'0',

? ? ? //? ? ?top:'0'

? ? ? //? ?}

? ? ? // }

? ? ];

? ? this._componentDidMount = this._componentDidMount.bind(this);

? }

? //組件加載以后，為每張圖片計算其位置的范圍

? _componentDidMount(){

? ? //首先拿到舞臺的大小

? ? let stageDom = this.refs.stage,

? ? ? ? stageW = stageDom.scrollWidth,

? ? ? ? stageH = stageDom.scrollHeight,

? ? ? ? halfStageW = Math.ceil(stageW / 2),

? ? ? ? halfStageH = Math.ceil(stageH / 2);

? ? //拿到一個imgFigure的大小 因為每個大小都一樣 只要那第一個就可以了

? ? let imgFigureDom = this.refs.imgFigures0,

? ? ? ? imgW = imgFigureDom.scrollWidth,

? ? ? ? imgH = imgFigureDom.scrollHeight,

? ? ? ? halfImgW = Math.ceil(imgW/2),

? ? ? ? halfImgH = Math.ceil(imgH/2);

? ? //計算中心圖片的位置點

? ? this.Constent.centerPos = {

? ? ? left:halfStageW-halfImgW,

? ? ? top:halfStageH-halfImgH

? ? }

? ? //計算左側，右側區(qū)域圖片排布位置點取值范圍

? ? this.Constent.hPosRange.leftSecX[0] = -halfImgW;

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

? ? this.Constent.hPosRange.rightSecX[0] = halfStageW - halfImgW;

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

? ? this.Constent.hPosRange.y[0] = -halfImgH;

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

? ? //計算上側區(qū)域圖片位置點取值范圍

? ? this.Constent.vPosRange.topY[0] = -halfImgH;

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

? ? this.Constent.vPosRange.x[0] = halfImgW - imgW;

? ? this.Constent.vPosRange.x[1] = halfImgW;

? ? this._rearrang(0);

}

/**

?* 重新布局所有圖片

?* param centerIndex 指定居中排布哪個圖片

?*/

_rearrang(centerIndex){

? let imgsArrangeArr = this.imgsArrangeArr,

? ? ? Constent = this.Constent,

? ? ? hPosRange = Constent.hPosRange,

? ? ? vPosRange = Constent.vPosRange,

? ? ? hPosRangeLeftSecX = hPosRange.leftSecX,

? ? ? hPosRangeRightSecX = hPosRange.rightSecX,

? ? ? hPosRangeY = hPosRange.y,

? ? ? vPosRangeX = vPosRange.x,

? ? ? vPosRangeTopY = vPosRange.topY,

? ? ? imgsArrangeTopY = [],

? ? ? topImgNum = Math.ceil(Math.random() * 2),//取一個或者不取

? ? ? topImgSpliceIndex = 0,

? ? ? imgsArrangeCenterArr = imgsArrangeArr.splice(centerIndex,1);

? ? ? //首先居中 centerIndex 的圖片

? ? ? imgsArrangeCenterArr[0].pos = centerPos;

? ? ? //取出要布局上側的圖片的狀態(tài)信息

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

? ? ? imgsArrangeTopArr = imgsArrangeArr.splice(topImgSpliceIndex,topImgNum);

? ? ? //布局位于上側的圖片

? ? ? imgsArrangeTopArr.forEach((value,index) => {

? ? ? ? imgsArrangeTopArr[index].pos = {

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

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

? ? ? ? }

? ? ? });

? ? ? //布局左右兩側的圖片

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

? ? ? ? let 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])

? ? ? ? };

? ? ? }

? ? if(imgsArrangeTopArr && imgsArrangeTopArr[0]){

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

? ? }

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

? ? this.imgsArrangeArr = imgsArrangeArr;

}

? render() {

? ? let controllerUnits = [],

? ? ? ? imgFigures = [];

? ? imageDatas.forEach((value,i) => {

? ? ? //如果狀態(tài)信息不存在則初始化

? ? ? if(!this.imgsArrangeArr[i]){

? ? ? ? this.imgsArrangeArr[i] = {

? ? ? ? ? pos:{

? ? ? ? ? ? left:'0',

? ? ? ? ? ? top:'0'

? ? ? ? ? }

? ? ? ? }

? ? ? }

? ? ? imgFigures.push(<ImgFigure key={i} data={value} ref={"imgFigure"+i} arrange={this.imgsArrangeArr[i]} />);

? ? });

? ? return (

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

? ? ? ? <section className="img-sec">

? ? ? ? ? {imgFigures}

? ? ? ? </section>

? ? ? ? <nav className="control-nav">

? ? ? ? ? {controllerUnits}

? ? ? ? </nav>

? ? ? </section>

? ? );

? }

}

AppComponent.defaultProps = {

};

export default AppComponent;

{left: "0", top: "0"}? 打印出來都是0? 不知道哪里出錯了 沒報錯呀?