折叠相册

1、设置页面结构搭建的HTML代码如下:

<div class="wrapper">
   <ul class="cards-stack">
       @*第一列*@
       <li class="stack stack1">
           <ul>
               <li class="card card1">
                   <img src="~/Content/img1/01.jpg" alt="">
                   <div class="con">西瓜</div>
               </li>
               <li class="card card2">
                   <img src="~/Content/img1/02.jpg" alt=""/>
                   <div class="con">西红柿</div>
               </li>
               <li class="card card3">
                   <img src="~/Content/img1/03.jpg" alt="">
                   <div class="con">雪梨</div>
               </li>
           </ul>
       </li>
       @*第二例*@
       <li class="stack stack2">
           <ul>
               <li class="card card1">
                   <img src="~/Content/img1/04.jpg" alt="">
                   <div class="con">西瓜</div>
               </li>
               <li class="card card2">
                   <img src="~/Content/img1/05.jpg" alt="">
                   <div class="con">木瓜</div>
               </li>
               <li class="card card3">
                   <img src="~/Content/img1/06.jpg" alt="">
                   <div class="con">南瓜</div>
               </li>
           </ul>
       </li>
       @*第三列*@
       <li class="stack stack3">
           <ul>
               <li class="card card1">
                   <img src="~/Content/img1/08.jpg" alt="">
                   <div class="con">计算器</div>
               </li>
               <li class="card card2">
                   <img src="~/Content/img1/07.jpg" alt="">
                   <div class="con">荔枝</div>
               </li>
               <li class="card card3">
                   <img src="~/Content/img1/01.jpg" alt="">
                   <div class="con">西瓜</div>
               </li>
           </ul>
       </li>
   </ul>
</div>

2、设置背景和最大盒子的代码如下：

* {
    margin: 0;padding: 0;list-style: none;
}
html, body {
    width: 100%;height: 100%;
    /*背景颜色*/
    background: linear-gradient(to left top,#f5A1D5 0%,#cdd3e9);
    /*linear-gradient线性渐变*/
}
/*最外面的UL设置*/
.cards-stack {
    width: 600px;margin: 100px auto;position: relative;cursor: pointer;
}

3、设置相框的列与横的代码如下：

/*列折叠的渠道*/
.stack {
    position: absolute;
    left: 0;
    /* transition:all 0.4s linear; */
    transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.22);
    /*cubic-bezier：相册折叠的立方贝塞尔曲线*/
}
/*相框的设置*/
.card {
    position: absolute;left: 0; top: 0;
    height: 200px;  width: 200px;padding: 5px;
    border-radius: 10px;background-color: #fff;
    box-shadow: 1px 2px 2px 0 #aaa;    
    transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.22);
    transition-delay: 0.4s;/*延迟*/
}

4、设置每一张相片和文字的代码如下：

/*所有相片的设置*/
.card img {
    width: 100%;border-radius: 10px;
}
/*所有相片底部文字的设置*/
.card .con {
    padding: 5px 10px; text-align: center;
    line-height: 40px; height: 40px; font-size: 20px;
}

5、设置相片重叠的代码如下：

/*实现重叠的效果*/
.stack .card1 {
    z-index: 10;/*在最下面显示*/
    transform: rotateZ(-2deg);/*向右偏转2度*/
}
.stack .card2 {
    z-index: 9;/*在中间显示*/
    transform: rotateZ(-7deg);/*向右偏转7度*/
}
.stack .card3 {
    z-index: 8;/*在最上面显示*/
    transform: rotateZ(5deg);/*向左偏转5度*/
}

6、点击触发相册每一列的位置变化代码如下：

/*第一列*/
.transition .stack1 {
    left: 0px;
}
/*第二列*/
.transition .stack2 {
    left: 220px;
}
/*第三列*/
.transition .stack3 {
    left: 440px;
}

7、点击触发相册每一横的位置变化代码如下：

 /*第一横*/
.transition .stack ul .card {
    transform: rotateZ(0deg);
}
/*第三横*/
.transition .stack ul .card.card1 {
    top: 440px;
}
/*第二横*/
.transition .stack ul .card.card2 {
    top: 220px;
}

8、引用jquery插件、js代码点击事件

//引用jquery插件
<script src="~/Content/js/jquery.js"></script>
//先展开列，再展开横；先收列，再收横；
//点击触发相册事件
$(".cards-stack").click(function () {
    $(this).toggleClass('transition');//触发transition事件
})

9、效果动态图显示如下：