js method to implement complex sorting after zooming in and out of images

js method to implement complex sorting after zooming in and out of images_jquery

WBOY

Release： 2016-05-16 17:48:30

Original

1218 people have browsed it

This is a picture effect based on jquery. Its function is: when the picture becomes larger (smaller) when clicked, other pictures will be sorted and moved according to certain rules.

First of all, let’s take a look at the final rendering:

Some people may think after seeing this, why is this so difficult? Isn’t it too simple? Did Xiaoti make a big deal? Only when you actually try it will you know what the difficulty is.

First of all, let’s talk about the requirements:
1. Pictures are divided into big and small pictures. The big picture occupies the position of four small pictures.
2. Click on the picture to zoom in and out and rearrange the order. ,
3. When you click on the even column (2,4), the item in front of it will be lifted up and arranged behind it
4. The first item cannot be moved, and the second item will occupy the third place if you click on it. For the position of four, take the first small one from the back and place it in the second position.
The demand is like this. Is it more difficult now? My idea is to implement it step by step according to this demand. The code is as follows:

Copy the code The code is as follows:

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); 
$(content).height(max); 
return; 
} 
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*defaultSize; 
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,content,oldContent); 
return; 
}else{ 
elemArr=$("li[x='0'][y='" y "']",content).get().concat(elemArr); 
//$("li[x='0'][y='" y "']",content).remove(); 
x-=defaultSize; 
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-=defaultSize; 
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")); 
function insertSmallArr(arr,item){ 
arr = item.get().concat(arr); 
var tmpArr =[]; 
var first =null; 
for (var i=arr.length-1;i>=0 ;i-- ){ 
if (!$(arr[i]).hasClass("big")){ 
first=arr[i]; 
break; 
} 
} 
if (first){ 
tmpArr.push(first); 
} 
for (var i=0,l=arr.length;iif (first !== arr[i]){ 
tmpArr.push(arr[i]); 
} 
} 

return tmpArr; 
} 
function 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; 
} 
return {x:minx,y:miny}; 
} 
$("#main_content").delegate("li","click",function(){ 
if ($(this).index()==0){ 
return 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(){ 
var parent = $(this).closest("ul"); 
$(this).parent().after("news
"); 
var c = parent.children(); 
var tmpArr = c.get(); 
var content = $(''); 
$("#main_content").append(content); 
parent.hide(); 
arrCol=[0,0,0,0]; 
setPosition(tmpArr,content, parent); 
}); 
function animate(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")) 
}) 
}); 
}