jquery实现照片墙

jquery照片墙

• 由15张图片构成，大致思路：随机生成所有图片-->点击其中一张变为一张大图-->点击大图又变回多张
• 主要用到jquery实现
• 先来看看效果

html：

    <div class="wraper">
       <ul class="wraper-ul"></ul>
    </div>

css：

    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    html,
    body,
    .wraper {
        width: 100%;
        height: 100%;
        background-color: #ececec;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .wraper-ul {
        width: 80%;
        height: 80%;
        position: relative;
        perspective: 800px;
    }
    .wraper-ul li {
        position: absolute;
        transform-style: preserve-3d;
        background-color: #fff;
        cursor: pointer;
    }
    .box {
        width: 100%;
        height: 100%;
        transform: scale(0.9);
    }
    .box img {
        width: 100%;
        height: 100%;
    }

js：

    class photos {
    constructor(classname){
        this.wraper = $(classname);
        this.ulw = parseint(this.wraper.css('width'));
        this.ulh = parseint(this.wraper.css('height'));
        this.liw = this.ulw /5;
        this.lih = this.ulh /3;
        this.change = true;
        this.creatimgs();
    }
    creatimgs(){
        //行
        for(let i =0;i<3;i++){
            //列
            for(let j=0;j<5;j++){
                let lis = $("<li><div class='box'><img src='' alt=''></div></li>")
                    .css({
                        width:this.liw +'px',
                        height:this.lih +'px',
                        left:j*this.liw +'px',
                        top:i*this.lih + 'px',
                        transform:'scale(0.9) rotate('+(math.random() * 40 - 20)+'deg)'+ 
                            'translatex(' + (math.random() * 100 - 50) + 'px)' +
                            'translatey(' + (math.random() * 100 - 50) + 'px)' +
                            'translatez(' + (math.random() * 200 - 100) +'px)'
                    })
                    .find('img').attr('src','./img/'+(i*5+j+11) +'.jpg')
                    .end()
                this.wraper.append(lis);
            }
        }
        this.changeimgs();
    }
    changeimgs(){
        this.wraper.find('li').on('click',(e)=>{
            if(this.change){ //多张变一张
                let bgimg = $(e.target).attr('src');
                let bgleft =0;
                let bgtop =0;
                $('li').each((index,item)=>{
                    $(item).delay(10 * index).animate({opacity:0},200,()=>{
                        $(item).css({
                            width: this.liw +'px',
                            heigth:this.lih +'px',
                            transition: '',
                            opacity:'1',
                            transform: 'scale(1) rotate(0deg)' +
                                'translatex(0px)' +
                                'translatey(0px)' +
                                'translatez(0px)'
                        }) 
                        $(item).find('.box').css({
                            transform:'scale(1)'
                        })
                        $(item).find('img').attr('src', bgimg).css({
                            position:'absolute',
                            width:this.ulw +'px',
                            height:this.ulh +'px',
                            top: -bgtop,
                            left: -bgleft
                        });
                        bgleft += this.liw;
                        if(bgleft>=this.ulw){
                            bgtop +=this.lih;
                            bgleft =0;
                        }
                    })
                })
                this.change = false;
            }else{ //一张变多张
                this.change = true;
                $('li').each((index, item) => {
                    let j =index % 5;
                    let i =math.floor(index / 5);  
                    $(item).animate({ opacity: 0 }, 200, () => { 
                        $(item).find('img').css({
                            position: 'absolute',
                            width: '100%',
                            height: '100%',
                            top: 0,
                            left: 0
                        }) 
                        $(item).find('img').attr('src', './img/' + (index+11) + '.jpg')
                        $(item).find('.box').css({
                            transform: 'scale(0.9)'
                        })
                        $(item).css({
                            width: this.liw + 'px',
                            height: this.lih + 'px',
                            left: j * this.liw + 'px',
                            top: i * this.lih + 'px',
                            transition:'all,0.5s',
                            opacity: '1',
                            transform: 'scale(0.9) rotate(' + (math.random() * 40 - 20) + 'deg)' +
                                'translatex(' + (math.random() * 100 - 50) + 'px)' +
                                'translatey(' + (math.random() * 100 - 50) + 'px)' +
                                'translatez(' + (math.random() * 200 - 100) + 'px)'
                        })
                    })    
                })
            }
        })
    }
}
var photo = new photos('.wraper-ul');

参考自：腾讯课堂渡一教育