js實作圖片放大縮小功能後進行複雜排序的方法_jquery

這是一個基於jquery的圖片效果，它的作用是：當圖片點擊變大(變小)時，其它圖片按照一定的規則進行排序運動。

首先來看下最終的效果圖：


有人可能看到這個會覺得，這有什麼難的，這麼簡單的事，樓主是不是太小提大作了？當你真正去嘗試時，你才知道到底有什麼困難。

首先，我們來講下需求：
1. 圖片分為大小和小圖，大圖佔四個小圖的位置，
2. 點擊圖片放大縮小， 重新排列順序,
3. 當點選偶數列(2,4)時，它前面的那項將向提出來向後面排列
4.第一個項不能動，點第二個是將佔第三四的位置，從後面取第一個小的放置在第二的位置。
需求就是這樣的了，現在難度是否有加大呢，我的思路就是按照這個需求一步步去實現的。程式碼如下：

複製程式碼 程式碼如下:

var elemArr = $("#old").find("li").get();
var arrCol=[0,0,0,0];
var defaultSize = 211;
function setPosition(elemArr,content,oldContent){
//alert(elemArr.length)
if (elemArr.length==0){
$(oldContent).remove();
animate(content.find("li"));
var max = Math.max(arrCol[0],arrCol[1],arrCol[2],arrCol[3])
$(content).parent().height(max);
$(內容).高度(最大);
返回；
}
var item= $(elemArr.shift());
if (item.hasClass("big")){
//大
var min =computeMin(content);
var x = min.x;
var y =min.y;
if (x==defaultSize){
var tmp = $("li[x='0'][y='" y "']",content);
if (tmp.hasClass("static")){
//第一個
/*
arrCol[1]=0;
x=2*預設大小；
if ($("li[x='" x "'][y='" y "']",content).size()>0){
y=parseInt($(" li[x='" x "'][y='" y "']",content).attr("y")) 2*defaultSize;
}
arrCol[1]=0;
*/
elemArr=insertSmallArr(elemArr,item);
setPosition(elemArr,內容,oldContent);
回傳；
}else{
elemArr=$("li[x='0'][y='" y "']",content).get().concat(elemArr);
//$("li[x='0'][y='" y "']",content).remove();
x-=預設大小;
arrCol[0]-=defaultSize;
}
}
if (x==defaultSize*3){
elemArr=$("li[x='" defaultSize*2 "'][y='" y "'] ",content).get().concat(elemArr);
//$("li[x='200'][y='" y "']",content).remove();
x-=預設大小;
arrCol[2]-=defaultSize;
}
item.attr({"top":y,"left":x}).attr({"x":x,"y":y});
if (x==0){
arrCol[0] =defaultSize*2;
arrCol[1] =defaultSize*2;
}
if (x ==defaultSize*2){
arrCol[2] =defaultSize*2;
arrCol[3] =defaultSize*2;
}
}else{
//小
var min =computeMin(content);
var x = min.x;
var y =min.y;
item.attr({"top":y,"left":x}).attr({"x":x,"y":y});

if (x==0){
arrCol[0] =defaultSize;
}
if (x ==defaultSize){
arrCol[1] =defaultSize;
}
if (x ==defaultSize*2){
arrCol[2] =defaultSize;
}
if (x ==defaultSize*3){
arrCol[3] =defaultSize;
}
}
$(content).append(item)
setPosition(elemArr,content,oldContent);
}
setPosition(elemArr,$("#news"),$("#old"));
函數 insertSmallArr(arr,item){
arr = item.get().concat(arr);
var tmpArr =[];
var 首先 =null;
for (var i=arr.length-1;i>=0 ;i-- ){
if (!$(arr[i]).hasClass("big")){
first =arr[i];
休息;
}
}
if (第一個){
tmpArr.push(第一個);
}
for (var i=0,l=arr.length;iif (first !== arr[i]){
tmpArr.push(arr [我]）;
}
}

回傳tmpArr;
}
函數computeMin(content){
var arr = $(content).find("li ");
var miny = Math.min(arrCol[0],arrCol[1],arrCol[2],arrCol[3])
var minx= 0;
if (miny==arrCol [3]){
minx=defaultSize*3;
}
if (miny==arrCol[2]){
minx=defaultSize*2;
}
if ( miny==arrCol[1]){
minx=defaultSize;
}
if (miny==arrCol[0]){
minx=0
}
回傳 { x :minx,y:miny};
}
$("#main_content").delegate("li","click",function(){
if ($(this).index( ) ==0){
回傳false
}
if (!$(this).hasClass("big")){
$(this).attr({"h": 417, "w":417})
}else{
$(this).attr({"h":206,"w":206})
}
$(this) .toggleClass ("big")
$(this).parent().hide();
var c =$(this).parent().children();
c.attr({ "x ":0,"y ":0});
arrCol=[0,0,0,0];
var tmpArr = c.get();
var content = $('

;');
$("#main_content").append(content);
setPosition(tmpArr,content,$(this).parent())
$( " # addNews").click(function(){
varparent = $(this).closest("ul");
$(this).parent().after("

新聞

");
var c = Parent.children();
var tmpArr = c.get();
var content = $('

') ;
$("#main_content").append(content);
arrCol=[0,0,0,0];
setPosition(tmpArr,content,父）
}）;
函數動畫(arr){

$(arr).each(function(){
$(this) .animate({
"top":parseInt($(this) .attr("top")),
"left":parseInt($(this).attr("left")),
"width":parseInt($(this).attr("w") )),
"height":parseInt($(this).attr("h"))
})
});
}