相册列表展示动画解析

var isFold=false;
var rows=5;
var collums=5;
//减少dom的查询次数
var gallery=$(".gallery");
//重复操作放在变量中
var w=gallery.width()/collums;
var h=gallery.height()/rows;
//初始化
innit();

1初始化init函数

//初始化
    function innit() {
        for(var r=0;r<rows;r++){
        //显示行
            for (var c=0;c<collums;c++) {
            //显示列
                $("<li><div class='item'></div></li>")
                .css({
                    "width":w,
                    "height":h,
                    "left":c*w,
                    "top":r*h
                })
                .find(".item")
                .css({
                    "background-image":"url(img/"+(r*collums+c)+".jpg)",
                    "background-size":"cover"
                })
                .end()
                .appendTo(gallery);
            };
        };
    };

//合拢
function fold (index) {
    //让li还原
    var aLi=gallery.find("li");
//                  var index=$(this).index();
    //所有的li translate rotate 还原
    aLi
    .css({"transform":"translate(0px,0px) rotate(0deg)"})
    .find(".item")
    .css({
        "transform":"scale(1)",
        "background-image":"url(img/"+index+".jpg)",
        "background-size":"auto"
    })
    .each(function (i) {
        var c=i%collums*100/(collums-1);
        var r=parseInt(i/rows)*100/(rows-1);
        $(this).css({"background-position":c+"%" +r+"%"})
    })
    isFold=true;
};

function unfold () {
    $(".gallery").find("li").each(function (i) {
        //x轴移动的距离 列数乘上30再减去起始值
        var dx=i%collums*30-60;
        //Y轴移动的距离 列数乘上30再减去起始值
        var dy=parseInt(i/collums)*30-60;
        //随机旋转的角度 -30deg到30deg
        var deg=(Math.random()*60-30);
        //li移动距离 同时旋转  item进行缩放
        $(this)
        .css("transform","translate("+dx+"px,"+dy+"px) rotate("+deg+"deg)")
        .find(".item")
        .css({"background-image":"url(img/"+i+".jpg)","background-size":"cover"})

    }).find(".item").css("transform","scale(0.97)");
    isFold=false;
};

//初始化
innit();
//初始状态为展开
unfold();
//点击事件
gallery.find("li").click(function () {
    if (isFold) {
        unfold();
    } else{
        //传递当前图片
        var index=$(this).index();
        fold(index);
    };
});

第一个值 all或者需要改变的样式
第二个值过度时间
第三个值 动画类型
最后一个 延迟事件
left 2s ease-in 2s，top 2s ease-in 2s