仿原生相册

在body中添加相册列表

       <div class="backColor"></div>
        <section class="section">
          <figure id="container_g" class="gallery">
               <div class="item"><img src="../img/1.jpg" alt="1"></div>
               <div class="item"><img src="../img/2.jpg" alt="2"></div>
               <div class="item"><img src="../img/3.jpg" alt="3"></div>
               <div class="item"><img src="../img/4.jpg" alt="4"></div>
               <div class="item"><img src="../img/5.jpg" alt="5"></div>
               <div class="item"><img src="../img/6.jpg" alt="6"></div>
               <div class="item"><img src="../img/7.jpg" alt="7"></div>
               <div class="item"><img src="../img/8.jpg" alt="8"></div>
               <div class="item"><img src="../img/9.jpg" alt="9"></div>
               <div class="item"><img src="../img/10.jpg" alt="10"></div>
               <div class="item"><img src="../img/11.jpg" alt="11"></div>
               <div class="item"><img src="../img/12.jpg" alt="12"></div>
               <div class="item"><img src="../img/13.jpg" alt="13"></div>
               <div class="item"><img src="../img/14.jpg" alt="14"></div>
               <div class="item"><img src="../img/15.jpg" alt="15"></div>
               <div class="item"><img src="../img/16.jpg" alt="16"></div>
          </figure>
          </section>

添加相册样式 

           .backColor{
                display: block;
                width:100%;
                height:100vh;
                background:-webkit-linear-gradient(#663399,#333366,#330066);
                filter:blur(100px);
                position:relative;
                z-index: 1;
            }
            .section{
                display: block;
                width:100%;
                height:100vh;
                margin:0px;
                overflow: hidden;
                position:absolute;
                top:0px;
                left:0px;
                z-index: 2;
                
            }
            #container_g{
                position: absolute;
                z-index: 3;
            }
             .gallery{
                 display: flex;
                 flex-wrap: wrap;
                 justify-content: flex-start;
                 margin:0px;
                 touch-action: none;
             }
             .gallery .item{
                 display:inline-block;
                width:25%;
                height:16vh;
             }
             .gallery .item img{
                width:100%;
                height:100%;
                box-sizing: border-box;
             }
             .animation{
                 left:0;
                 -webkit-transition: 1s ease;
                 -ms-transition: 1s ease;
                 -o-transition: 1s ease;
                 transition: 1s ease;
             }

添加预览样式 

            .preview {
                 display: flex;
                 flex-wrap: nowrap;
                 justify-content: flex-start;
                 margin:0px;
                 touch-action: none;
             }
             .preview .item{
                display:inline-block;
                width:100%;
                height:100%;
                margin:auto;
             }
             .preview .item img{
                width:100vw;
                height:100vh;
                box-sizing: border-box;
             } 

 

 通过监听click事件实现略缩模式和预览模式之间的切换

//通过监听控件实现小图查看、大图预览
$('#container_g .item').on('click',function(e){
    //当回到小图浏览时不需要动画
    $('#container_g').removeClass('animation');
    if($('#container_g').hasClass('preview')){
        $('#container_g').removeClass('preview');
        $('#container_g').addClass('gallery');
        $('.gallery').css('width',100+'vw');
        move(0);
    }else{
        $('#container_g').removeClass('gallery');
        $('#container_g').addClass('preview');
        this.sumImg =$('#container_g .item').length; 
        $('.preview').css('width',this.sumImg*100+'vw');
        currentTranslateX=-width*$(this).index();
        move(currentTranslateX);//跳转到用户指定的图片
    }
});

监听touchstart事件，记录手指开始的位置 

$('#container_g').on('touchstart',function(e) {
    var _touch = e.originalEvent.changedTouches[0];
    startOffsetX= _touch.pageX;
});

监听touchmove事件，获得滑动位置 ，设置isTouchStart = true。

$('#container_g').on('touchmove',function(e){
     isTouchStart = true;
     $('#container_g').removeClass('animation');//手指滑动是不需要动画的产生
     dx = e.originalEvent.changedTouches[0].pageX-startOffsetX;//获取滑动距离
     move(currentTranslateX+dx);//跟随手指的移动而滑动
});

监听touchend事件，根据手指滑动的距离判断是否切换当前图片。 

$('#container_g').on('touchend',function(e){
    $('#container_g').addClass('animation');//手指滑动结束需要动画的产生
    dx = e.originalEvent.changedTouches[0].pageX-startOffsetX;//获取滑动距离
    if(isTouchStart){
        if(Math.abs(dx)>=width/2){
            if(currentTranslateX<=0 && currentTranslateX>-width *itemsLength){
                if(dx>0){
                    if(currentTranslateX<0){//判断是否到左边的临界值
                        currentTranslateX +=width;
                    }   
                }else if(currentTranslateX>-width*(itemsLength-1)){//判断是否到右边的临界值
                    currentTranslateX-=width;
                }
            }  
        }
        move(currentTranslateX);
    }
    isTouchStart = false;
});

所有的JS代码 

var width = $('#container_g')[0].offsetWidth;
var isTouchStart = false;
var startOffsetX = 0; 
var currentTranslateX = 0;
var itemsLength = $('#container_g .item').length;

//通过监听控件实现小图查看、大图预览
$('#container_g .item').on('click',function(e){
    //当回到小图浏览时不需要动画
    $('#container_g').removeClass('animation');
    if($('#container_g').hasClass('preview')){
        $('#container_g').removeClass('preview');
        $('#container_g').addClass('gallery');
        $('.gallery').css('width',100+'vw');
        move(0);
    }else{
        $('#container_g').removeClass('gallery');
        $('#container_g').addClass('preview');
        this.sumImg =$('#container_g .item').length; 
        $('.preview').css('width',this.sumImg*100+'vw');
        currentTranslateX=-width*$(this).index();
        move(currentTranslateX);
    }
});

//滑动图片
move = function(dx){
    $('#container_g').css('transform' ,"translate3d(" + dx + "px, 0,0)");
};  
//通过监听touchstart/touchmove/touchend来记录手指的位置
$('#container_g').on('touchstart',function(e) {
    var _touch = e.originalEvent.changedTouches[0];
    startOffsetX= _touch.pageX;
});
$('#container_g').on('touchmove',function(e){
     isTouchStart = true;
     $('#container_g').removeClass('animation');//手指滑动是不需要动画的产生
     dx = e.originalEvent.changedTouches[0].pageX-startOffsetX;//获取滑动距离
     move(currentTranslateX+dx);//跟随手指的移动而滑动
});
$('#container_g').on('touchend',function(e){
    $('#container_g').addClass('animation');//手指滑动结束需要动画的产生
    dx = e.originalEvent.changedTouches[0].pageX-startOffsetX;//获取滑动距离
    if(isTouchStart){
        if(Math.abs(dx)>=width/2){
            if(currentTranslateX<=0 && currentTranslateX>-width *itemsLength){
                if(dx>0){
                    if(currentTranslateX<0){//判断是否到左边的临界值
                        currentTranslateX +=width;
                    }   
                }else if(currentTranslateX>-width*(itemsLength-1)){//判断是否到右边的临界值
                    currentTranslateX-=width;
                }
            }  
        }
        move(currentTranslateX);
    }
    isTouchStart = false;
});