旋转合并照片墙-特效照片墙

思路：

首先预加载照片，分大图小图两个循环预加载函数，共48张图片，count记录循环次数，count==48时执行loadSuccess()中代码。

先让照片显示在div中，然后定位隐藏在左上角，然后计算每张图片应该在的位置，设置其left和top。使用transition语法让他们动态显示，并且设置不同的延迟时间TransitionDelay让他们一张一张显示，并且有一个随机角度（循环用双层循环，因为分为行和列）。

1）在div中加入span，存放定位的大图（初始隐藏），点击某一图片时，div边框大小改变，取消随机角度，重新计算left和top并设置给div，所有span（不同定位）组成当前图片的大图并显示，显示上一个和下一个按钮（记录点击图片的索引，以实现上一个和下一个功能）。

2）隐藏span，恢复边框、随机角度、展开时的top和left值，取消TransitionDelay（展开时没有延迟）。

在这个点击事件中，需要判断当前状态图片是展开还是合并，var flag = true用 flag记录（true是打开）最后flag = !flag; 取反。如果打开的，则合并执行 1）；else则打开执行 2）。

上一个和下一个功能：轮播图原理，增加一个随机延迟时间来更换图片的动画（TransitionDelay = Math.random() * 500 + 'ms'）。

ps：小图125*125 大图750*500

图片网盘

蛋糕网盘 https://pan.baidu.com/s/14xTrLklWHpD_NCo7uTVfCA

也可以替换成这个蛋糕图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
        }

        #container {
            height: 100%; /*该元素及其父元素和html、body都设置100% 才能全屏效果*/
            background: #999;
        }

        .img {
            width: 125px;
            height: 125px;
            border: 5px solid #fff;
            position: absolute; /*定位后修改left、top值才会生效*/
            left: -135px; /*初始隐藏在左上角*/
            top: -135px;
            -webkit-transition: all 1.5s ease 1s; /*值改变时才生效*/
        }

        .span {
            opacity: 0;
            background: red;
            width: 125px;
            height: 125px;
            display: block;
        }

        #prev, #next {
            width: 40px;
            height: 80px;
            position: absolute;
            top: 50%;
            margin-top: -40px;
            display: none;
        }

        #prev {
            background: #fff url("img/prev.png") center center no-repeat;
            left: 0;
            border-radius: 0px 10px 10px 0;
        }

        #next {
            background: #fff url("img/next.png") center center no-repeat;
            right: 0;
            border-radius: 10px 0 0 10px;
        }
    </style>
</head>
<body>

<div id="container"></div>
<span id="prev"></span>
<span id="next"></span>

<script>
    var oContainer = document.getElementById('container');
    var oNext = document.getElementById('next');
    var oPrev = document.getElementById('prev');
    var count = 0;/*计数 48*/

    for (var i = 0; i < 24; i++) {
        var oImg = new Image();
        oImg.onload = function () {/*预加载*/
            count++;/*总共四十八张图*/
            if (count == 48) {/*如果加载完成 执行函数*/
                loadSuccess();
            }
        };
        oImg.src = 'img/thumbs/' + (i + 1) + '.jpg';/*小图*/
        /*src写在下面 解决ie6不好用问题*/
    }
    for (var i = 0; i < 24; i++) {
        var oImg = new Image();
        oImg.onload = function () {
            count++;
            if (count == 48) {
                loadSuccess();
            }
        };
        oImg.src = 'img/' + (i + 1) + '.jpg';
    }

    var index = 0;/*计数 循环24次*/
    function loadSuccess() {
        for (var i = 0; i < 4; i++) { //行/*双层for循环  外层行 里层列*/
            for (j = 0; j < 6; j++) {  //列
                index++;/*1-24*/
                var oDiv = document.createElement('div');/*创建一个元素 class=‘img’ 放图片*/
                oDiv.className = 'img';
                oDiv.innerHTML = `<span class="span"></span>`;/*div中插入span（存放合并后的大图）*/
                oDiv.row = i;/*自定义属性 行 列*/
                oDiv.col = j;
                oDiv.style.background = 'url(img/thumbs/' + index + '.jpg)';/*根据index插入图片*/
                oDiv.index = index;/*把index设置为自定义属性 索引 1-24*/
                oDiv.onclick = fn;  /*点击事件*/
                oContainer.appendChild(oDiv);/*注意位置在iSpaceXiSpaceY上*/

                var iSpaceX = (oContainer.offsetWidth - 135 * 6) / 7;/*列空隙*/
                var iSpaceY = (oContainer.offsetHeight - 135 * 4) / 5; /*行空隙*/
                oDiv.style.webkitTransitionDelay = (24-index) * 100 + 'ms';/*动画延迟 最后一个先出来所以 24-index*/
                oDiv.style.webkitTransform = 'rotate(' + (Math.random() - 0.5) * 40 + 'deg)'; /*随机角度 -20到20*/
                oDiv.style.left = (oDiv.col + 1) * iSpaceX + oDiv.col * 135 + "px";
                oDiv.style.top = (oDiv.row + 1) * iSpaceY + oDiv.row * 135 + "px";
                /*第一张left 零个图片width一个空隙  列数*图片width+（列数+1）*空隙
                * 第二张left 一个图片width两个空隙
                * 。。。。。
                * */
            }
        }

        var iLeft = (oContainer.offsetWidth - 127 * 6) / 2;/*border变为1px 只有两个空隙  左右*/
        var iTop = (oContainer.offsetHeight - 127 * 4) / 2;/*上下空隙*/
        var aDiv=oContainer.getElementsByTagName('div');/*重新获取div 已经变成数组*/
        var aSpan = oContainer.getElementsByTagName('span');/*重新获取span 数组*/
        var flag = true;/*判断是否打开 true打开*/
        var iNow = 0;/*记录当前索引*/

        function fn() {/*点击事件  函数提升*/
            for (i = 0; i < aDiv.length; i++) {
                var oSpan = aDiv[i].getElementsByTagName('span')[0];/*[0]是让数组变成每一个元素*/
                if (flag) {/*if是真（打开）  让他合并*/
                    aDiv[i].style.webkitTransitionDelay = '0ms';/*取消动画延迟*/
                    aDiv[i].style.webkitTransform = 'rotate(0deg)';/*取消随机角度*/
                    aDiv[i].style.left = aDiv[i].col * 127 + iLeft + "px";
                    aDiv[i].style.top = aDiv[i].row * 127 + iTop + "px";
                    aDiv[i].style.border = '1px solid #fff';/*修改border*/
                    oSpan.style.opacity = 1;/*显示span span存放定位的大图*/

                    /* var spanRow=-aDiv[i].row;*/
                    var posTop = -aDiv[i].row * 125;/*position-top*/
                    var posLeft = -aDiv[i].col * 125;/*position-left*/
                    oSpan.style.background = 'url(img/' + this.index + '.jpg)'
                        + posLeft + 'px ' + posTop + 'px no-repeat';/*注意两个值之间空格*/
                    oNext.style.display = 'block';/*显示两个按钮*/
                    oPrev.style.display = 'block';
                    iNow = this.index;/*记录索引*/
                } else {/*打开*/
                    aSpan[i].style.webkitTransitionDelay = '0ms';
                    aDiv[i].style.border = '5px solid #fff';
                    aDiv[i].style.webkitTransform = 'rotate(' + (Math.random() - 0.5) * 40 + 'deg)';
                    aDiv[i].style.left = (aDiv[i].col + 1) * iSpaceX + aDiv[i].col * 135 + "px";
                    aDiv[i].style.top = (aDiv[i].row + 1) * iSpaceY + aDiv[i].row * 135 + "px";
                    oSpan.style.opacity = 0;
                    oNext.style.display = 'none';
                    oPrev.style.display = 'none';
                }
            }
            flag = !flag;/*取反*/
        }

        oNext.onclick = function () {/*下一个*/
            iNow++;
            if (iNow == aDiv.length+1) {
                iNow = 1;
            }
            change(iNow);
        };
        oPrev.onclick = function () {
            iNow--;
            if (iNow == 0) {
                iNow = aDiv.length;
            }
           change(iNow);
        };
        function change() {/*更换图片*/
            for (i = 0; i < aSpan.length; i++) {
                aSpan[i].style.webkitTransitionDelay = Math.random() * 500 + 'ms';/*随机延迟显示*/
                aSpan[i].style.backgroundImage = 'url(img/' + iNow + '.jpg)';/*换图片*/
            }
        }
    }

</script>
</body>
</html>