react制作一个照片墙小demo

点击下面的 指示灯 会变大 当前的图片会居于屏幕中间 再按一下会变成黄色 同时当前指示的照片会翻转到背面
是一个综合知识的考察 用到了css3的2d和3d转换

// App.js
import React,{ Component } from 'react'
import ReactDOM from 'react-dom'
import "./index.scss"
import PicTab from "./picTab"

class App extends Component {
  render(){
    return (
        <PicTab picJson={{
          picUrl:['./img/1.jpeg','./img/2.jpeg','./img/3.jpg','./img/4.jpg','./img/5.jpg','./img/6.jpg','./img/7.jpg','./img/8.jpg','./img/9.jpg',],
          text:['好看的动漫1','好看的动漫2','好看的动漫3','好看的动漫4','好看的动漫5','好看的动漫6','好看的动漫7','好看的动漫8','好看的动漫9'],
          bText:['我就是详细介绍1','我就是详细介绍2','我就是详细介绍3','我就是详细介绍4','我就是详细介绍5','我就是详细介绍6','我就是详细介绍7','我就是详细介绍8','我就是详细介绍9',]
        }}/>
    )
  }
}
ReactDOM.render(<App />,document.getElementById('root'));

import React,{ Component } from 'react'
class PicTab extends Component {
    constructor(){
        super();
        this.state={
            rotate:[],
            left:'',
            top:'',
            zIndex:'',
            index:0,
            rotateY:[]
        }
    }
    UNSAFE_componentWillMount(){
        this.random();
    }
    random(id){
        let newRotate=[],newLeft=[],newTop=[],newZindex=[],newRotateY=[];
        this.props.picJson.picUrl.forEach((item,index)=>{
            newRotateY.push(0)
            if(id===index){
                newRotate.push(0)
                newLeft.push('40%');
                newTop.push('20%')
                newZindex[index]=30;
            }else{
                newRotate.push(Math.random()*-720+360);
                newLeft.push(Math.random()*(window.innerWidth-340)+'px');
                newTop.push(Math.random()*(window.innerHeight-416)+'px')
            }
            
        })
        this.setState({
            rotate:newRotate,
            left:newLeft,
            top:newTop,
            zIndex:newZindex,
            rotateY:newRotateY
        })
    }
    css(){
        return `
            *{margin:0;padding:0;list-style:none;}
            body{background:#ccc;overflow:hidden;}
            .myUl{width:100%;height:100%;}
            .myUl>li{width:340px;height:416px;background:white;position:absolute;transform-style:preserve-3d;}

            .myUl>li .zm{width:100%;height:100%;position:absolute;left:0;top:0;transform:translateZ(1px)}
            .myUl>li>.zm img{width:285px;height:192px;position:absolute;left:50%;top:93px;transform:translateX(-50%)}
            .myUl>li>.zm .textNode{width:100%;position:absolute;text-align:center;bottom:24px;color:#4d544d;}

            .myUl>li .bm{width:100%;height:100%;position:absolute;left:0;top:0;transform:translateZ(-10px) rotateY(180deg);text-align:center;}

            .myOl{position:absolute;left:50%;transform:translateX(-50%);bottom:38px;height:22px;}            
            .myOl>li{width:22px;height:22px;float:left;background-color:#007d77;margin:0 8px;z-index:100;border-radius:50%;cursor:pointer;transition:.7s;}
            .myOl>li.active{transform:scale(1.5) rotateY(180deg);}
            .myOl>li.dactive{transform:scale(1.5) rotateY(360deg);background:yellow;}
        `
    }
    click(id,e){
        if(e.target.classList.contains('active')){
            if(e.target.classList.contains('dactive')){
                e.target.classList.remove('dactive');
                this.state.rotateY.splice(id,1,360);
            }else{
                e.target.classList.add('dactive');
                this.state.rotateY.splice(id,1,180);
            }
            this.setState({
                rotateY:this.state.rotateY
            })
        }else{
            this.random(id);
            this.setState({
                index:id
            })
        }
        
    }
    render(){
        let aLi=[],bLi=[];
        this.props.picJson.picUrl.forEach((v,i)=>{
        aLi.push(<li style={{transform:'perspective(800px) rotate('+this.state.rotate[i]+'deg) rotateY('+this.state.rotateY[i]+'deg)',left:this.state.left[i],top:this.state.top[i],transition:Math.random()*2+0.7+'s',zIndex:this.state.zIndex[i]}} key={i}>
            <div className="zm">
                <img alt={i} src={v} /><div className="textNode">{this.props.picJson.text[i]}</div>
            </div>
            <div className="bm">
                {this.props.picJson.bText[i]}
            </div>
        </li>)
        bLi.push(<li className={this.state.index===i?'active':''} key={i} onClick={this.click.bind(this,i)}></li>)
        });

      return (
        <div>
            <style dangerouslySetInnerHTML={{__html:this.css()}}></style>
            <ul className="myUl" ref="myUl">
                {aLi}
            </ul>
            <ol className="myOl">
                {bLi}
            </ol>
        </div>
      )
    }
}
export default PicTab

算是休闲 可以尝试着敲敲代码