jquery版相片牆（滑鼠控製圖片彙總和散開）

　　照片牆，簡單點說就是滑鼠點擊小圖片時，彙總變成一張大圖片；點擊大圖片時，散開變成小圖片。這個是我一年前無意間看到的動畫效果（現在已經忘記是哪位大神製作的了，引用了他的圖片），剛看到這個很炫的動畫超級激動，哇！怎麼可以這麼牛！我製作出來的沒那邊炫，但是還是製作出來了，算是對我的一種激勵！希望能有碰到問題就要解決它的精神，即使不是現在但會是不久的將來！    二、html代碼 複製代碼<div class="box">    <div><img src="images/thumbs/1.jpg"/></div>    <div><img src="images/thumbs/2.jpg"/></div>    <div><img src="images/thumbs/3.jpg"/></div>    <div><img src="images/thumbs/4.jpg"/></div>    <div><img src="images/thumbs/5.jpg"/></div>    <div><img src="images/thumbs/6.jpg"/></div>    <div><img src="images/thumbs/7.jpg"/></div>    <div><img src="images/thumbs/8.jpg"/></div>    <div><img src="images/thumbs/9.jpg"/></div>    <div><img src="images/thumbs/10.jpg"/></div>    <div><img src="images/thumbs/11.jpg"/></div>    <div><img src="images/thumbs/12.jpg"/></div>    <div><img src="images/thumbs/13.jpg"/></div>    <div><img src="images/thumbs/14.jpg"/></div>    <div><img src="images/thumbs/15.jpg"/></div>    <div><img src="images/thumbs/16.jpg"/></div>    <div><img src="images/thumbs/17.jpg"/></div>    <div><img src="images/thumbs/18.jpg"/></div>    <div><img src="images/thumbs/19.jpg"/></div>    <div><img src="images/thumbs/20.jpg"/></div>    <div><img src="images/thumbs/21.jpg"/></div>    <div><img src="images/thumbs/22.jpg"/></div>    <div><img src="images/thumbs/23.jpg"/></div>    <div><img src="images/thumbs/24.jpg"/></div></div><div class="alter">    <div class="prev"><img src="images/prev.png"/></div>    <div class="next"><img src="images/next.png"/></div></div>複製代碼    三、css代碼 複製代碼    <style type="text/css">        body {background: url("images/bg.jpg") left top; overflow: hidden;}        .box {position: relative;}        .box div {position: absolute; width: 125px; height: 125px; border: 1px solid #AAAAAA; box-shadow: 0 0 6px rgba(0,0,0,0.6); border-radius: 3px; cursor: pointer;}        .box div img {margin: 5px; width: 115px;}        .box div.curr {box-shadow: 1px 1px 3px #000000; border: none; border-radius: 0; }        .box div.curr img {margin: 0; width: 125px;}        .alter div {position: absolute; top: 50%; margin-top: -25px; width: 50px; height: 50px; line-height: 50px; border: 1px solid #AAAAAA; box-shadow: 0 0 3px rgba(0,0,0,0.6); text-align: center; cursor: pointer; background: white; opacity: 0.9; filter: Alpha(opacity=90);}        .alter div img {*display: block; *margin-top: 15px;}        .alter .prev {left: -52px;}        .alter .next {right: -52px;}    </style>複製代碼  四、js代碼 圖片散開事件： 複製代碼        /* 圖片散開 */        scatter: function(){            windowWidth = $(window).width();            windowHeight = $(window).height();            leftDistance = (windowWidth - itemWidth * colCount)/7; /* left左邊間距 */            topDistance = (windowHeight - itemHeight * rowCount) / 5; /* top上部間距 */            $item.each(function(){                var _index = $(this).index();                col = _index % colCount; /* 第幾列，從0開始 */                row = Math.floor(_index / colCount); /* 第幾行 */                cssLeft = (col  + 1) * leftDistance + col  * itemWidth; /* css中left位置設定 */                cssTop = (row + 1) * topDistance + row * itemHeight;/* css中top位置設定 */                $(this).stop().animate({"left": cssLeft, "top": cssTop},1000);                var cssRotate = itemRotate();                $(this).css({"transform": "rotate("+cssRotate+"deg)"})            })            $prev.stop().animate({"left": "-52px"});            $next.stop().animate({"right": "-52px"});        },複製程式碼分析： 　　這個事件的作用是點擊大圖片時，圖片散開變成多個小圖片，是通過控製圖片父級position的left和top值。 　　散開狀態，首先我想到的是，要顯示多少行和多少列（也就是每行顯示多少張圖片）？行和列有什麼關係？如果說我每行顯示6張圖片（也就是6列），那會有多少行？最後發現，原來可以用圖片的總個數除以列數再用Math.floor()取值（從第0列開始）得到總行數。好，到這裡，我就知道圖片要顯示多少行和多少列了。現在要判斷每張圖片屬於第幾行第幾列，這個要靠自己找規律，0-5為第一行，6-11為第二行，……，可得出行數 row = Math.floor(_index / colCount)（第0行開始），0、6、12、6*n為第一列，1、7、13、6*n+1為第二列，……，可得出列數 col = _index % colCount（第0列開始）。再考慮，圖片之前的距離要多少會合適一點。我這裡採取一個笨方法，我就規定圖片間的距離和最外圍圖片離視窗邊沿的距離一樣（硬性規定了哈），也就是所示：   這樣位置排布就考慮好了。 　　那麼接下來就是考慮圖片怎麼定位了，我先考慮top值，也就是距離視窗頂部的距離，先求出topDistance = (windowHeight - itemHeight * rowCount) / 5; 的值（假如是4行），第一行距離頂部的位置是topDistance，第二行距離頂部的位置topDistance * 2 + 上面圖片的高度，第三行距離頂部的位置是 topDistance * 3 + 上面圖片的高度 *2，依次類推可得出：cssTop = (row + 1) * topDistance + row * itemHeight。現在考慮left值，方法和top定位類似，先得出eftDistance = (windowWidth - itemWidth * colCount)/7（6列），……再推出cssLeft = (col + 1) * leftDistance + col * itemWidth。到這裡，圖片散開事件就解決了，裡面的細節我就不一一考慮了。 圖片彙總事件： 複製代碼        /* 圖片彙總 */        together: function(url){            windowWidth = $(window).width();            windowHeight = $(window).height();            targetWidth = windowWidth / 2; /* 以中心寬度為基準 */            targetHeight = windowHeight / 2; /* 以中心高度為基準 */            $item.each(function(){                var _index = $(this).index();                col = _index % colCount; /* 第幾列，從0開始 */                row = Math.floor(_index / colCount); /* 第幾行 */                cssLeft = targetWidth - halfCol * itemWidth + col * itemWidth;                cssTop = targetHeight - halfRow * itemHeight + row * itemHeight;                imgLeft = -col * itemWidth; /* 取背景圖片水平位置 */                imgTop = -row * itemHeight; /* 取背景圖片垂直位置 */                $(this).stop().animate({"left": cssLeft, "top": cssTop},1000);                $(this).css({"transform": "rotate(0deg)","background": "url("+url+") no-repeat "+imgLeft+"px "+imgTop+"px"})            })            $prev.stop().animate({"left": "0"});            $next.stop().animate({"right": "0"});        },複製程式碼分析： 　　這個事件的主要是點擊小圖片，圖片聚攏變成一張大圖片，並且大圖片時可切換的。這裡我要說明的是，圖片聚攏後該怎麼定位，大圖是由n個小圖片的背景圖片組成。 　　圖片聚攏定位，這個其實不難，先想想聚攏後會呈現什麼狀態，大圖是置中顯示的！那就是說明以視窗中心為基準，左右兩邊一邊三張圖片。那第一張小圖片是在哪個位置？第二張在哪個位置？……這個還不簡單，第一張圖片位置可以用視窗寬度的一半減去3張圖片寬度，第二張是視窗寬度一半減去3張圖片+第一張圖片（第0列），……類推得出：cssLeft = targetWidth - halfCol * itemWidth + col * itemWidth，好，這裡位置，圖片定位就解決了，cssTop類似，這裡就不再說明了。 　　小圖片背景定位，這個其實更簡單，第一張圖片定位是0,0, 第二張圖片是-125px,0,第三張圖片是-250px,0，……第7張圖片是0,-125px，第八張圖片是-125px,-125px……，推出結果：imgLeft = -col * itemWidth; imgTop = -row * itemHeight; js總代碼： 複製代碼$(function(){    var $item = $(".box div"),            $prev = $(".prev"),            $next = $(".next"),            windowWidth, /* 視窗寬度 */            windowHeight, /* 視窗高度 */            itemWidth = $item.width(), /* 圖片父級div的寬度 */            itemHeight = $item.height(), /* 圖片父級div的高度 */            leftDistance, /* left圖片左邊間距 */            topDistance,/* top圖片上邊間距 */            targetWidth,/* 以中心寬度為基準 */            targetHeight,/* 以中心高度為基準 */            col,/* 第幾列，從0開始 */            row,/* 第幾行 */            cssLeft,/* css中left位置設定 */            cssTop,/* css中top位置設定 */            imgLeft,/* 取背景圖片水平位置 */            imgTop,/* 取背景圖片垂直位置 */            colCount = 6, /* 多少列 */            rowCount = Math.ceil($item.length / colCount), /* 多少行 */            halfCol = colCount / 2, /* 圖片彙總時，以視窗中心位置為基準，左邊排列的圖片個數 */            halfRow = rowCount / 2, /* 圖片彙總時，以視窗中心位置為基準，上邊排列的圖片個數 */            flag = false, /* 判斷圖片時彙總還是散開，false為彙總，true為散開 */            page = 0; /* 按鈕切換時為第幾張圖片 */     /* 事件控制 */    var eventFunc = {        /* 圖片散開 */        scatter: function(){            windowWidth = $(window).width();            windowHeight = $(window).height();            leftDistance = (windowWidth - itemWidth * colCount)/7; /* left左邊間距 */            topDistance = (windowHeight - itemHeight * rowCount) / 5; /* top上部間距 */            $item.each(function(){                var _index = $(this).index();                col = _index % colCount; /* 第幾列，從0開始 */                row = Math.floor(_index / colCount); /* 第幾行 */                cssLeft = (col  + 1) * leftDistance + col  * itemWidth; /* css中left位置設定 */                cssTop = (row + 1) * topDistance + row * itemHeight;/* css中top位置設定 */                $(this).stop().animate({"left": cssLeft, "top": cssTop},1000);                var cssRotate = itemRotate();                $(this).css({"transform": "rotate("+cssRotate+"deg)"})            })            $prev.stop().animate({"left": "-52px"});            $next.stop().animate({"right": "-52px"});        },        /* 圖片彙總 */        together: function(url){            windowWidth = $(window).width();            windowHeight = $(window).height();            targetWidth = windowWidth / 2; /* 以中心寬度為基準 */            targetHeight = windowHeight / 2; /* 以中心高度為基準 */            $item.each(function(){                var _index = $(this).index();                col = _index % colCount; /* 第幾列，從0開始 */                row = Math.floor(_index / colCount); /* 第幾行 */                cssLeft = targetWidth - halfCol * itemWidth + col * itemWidth;                cssTop = targetHeight - halfRow * itemHeight + row * itemHeight;                imgLeft = -col * itemWidth; /* 取背景圖片水平位置 */                imgTop = -row * itemHeight; /* 取背景圖片垂直位置 */                $(this).stop().animate({"left": cssLeft, "top": cssTop},1000);                $(this).css({"transform": "rotate(0deg)","background": "url("+url+") no-repeat "+imgLeft+"px "+imgTop+"px"})            })            $prev.stop().animate({"left": "0"});            $next.stop().animate({"right": "0"});        },        /* 判斷圖片為散開 */        judgeScatter: function(){            $item.removeClass("curr").find("img").show();            $item.css({"background":"none"});            eventFunc.scatter();        },        /* 判斷圖片為彙總 */        judgeTogether: function(url){            $item.addClass("curr").find("img").hide();            eventFunc.together(url);        }    }     /* 圖片偏轉角度 */    function itemRotate(){        return 20 - Math.random() * 40;    }     eventFunc.scatter(); /* 初始化，圖片為散開狀態 */    $(window).resize(function(){        var _url = $item.eq(page).find("img").attr("src").replace("thumbs/","");        if(!flag){            eventFunc.judgeScatter();        }else {            /* 改變視窗大小，當為彙總狀態時，還是保持彙總狀態，和點點擊圖片判斷相反的原因是，下面為彙總狀態後給flag賦值為true，所以當為true時就是彙總狀態，散開類似判斷 */            eventFunc.judgeTogether(_url);        }    })     /* 點擊圖片 */    $item.click(function(){        var _url = $(this).find("img").attr("src").replace("thumbs/","");        page = $(this).index();        if(flag){            eventFunc.judgeScatter();            flag = false;        }else {            eventFunc.judgeTogether(_url);            flag = true;        }    })     /* 上一頁 */    $prev.click(function(){        if(page > 0){            page--;            var _url = $item.eq(page).find("img").attr("src").replace("thumbs/","");            eventFunc.together(_url);         }    })     /* 下一頁 */    $next.click(function(){        if(page < $item.length - 1){            page++;            var _url = $item.eq(page).find("img").attr("src").replace("thumbs/","");            eventFunc.together(_url);         }    }) })複製代碼