jquery实现照片墙

Posted 2021-10-27 sgs123

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');

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