JS implementation of the image zoom in to reduce the function of complex sorting method _jquery

This is a jquery based image effect, its role is: when the picture click to become larger (smaller), the other pictures follow certain rules of the sorting movement.

Let's take a look at the final effect chart:


Someone may see this will feel, this is what difficult, such a simple thing, the landlord is too small mention the masterpiece? When you really try, you know what the difficulty is.

First, let's talk about the requirements:
1. The picture is divided into size and small figure, large figure occupies four small map position,
2. Click the picture zoom in and out, rearrange the order,
3. When you click on the even sequence (2,4), the item in front of it will be presented to the back.
4. The first item does not move, the second is the position that will occupy the 34th place, from the back take the first small place in the second position.
Demand is like this, now the difficulty is increased, my idea is to follow this demand step-by-step to achieve. The code is as follows:

Copy Code code 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")) {
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")) {
First one
/*
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= '][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{
Small
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-=null;
for (var i=arr.length-1;i>=0; i--) {
if (!$ (Arr[i]). Hasclass ("big")) {
First=arr[i];
Break
}
}
if (a) {
Tmparr.push (a);
}
for (var i=0,l=arr.length;i<l; i++) {
if (!== 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 = $ (' <ul></ul> ');
$ ("#main_content"). Append (content);
SetPosition (tmparr,content,$ (this). parent ());
})
$ ("#addNews"). Click (function () {
var parent = $ (this). Closest ("ul");
$ (this). Parent () After ("<li>news</li>");
var c = Parent.children ();
var Tmparr = C.get ();
var content = $ (' <ul></ul> ');
$ ("#main_content"). Append (content);
Parent.hide ();
arrcol=[0,0,0,0];
SetPosition (tmparr,content, parent);
});
function Animate (arr) {

$ (ARR). each (function () {
$ (this). Animate ({
' Top ':p arseint ($ (this). attr ("Top")),
' Left ':p arseint ($ (this). attr (' left ')),
"Width":p arseint ($ (this). attr ("W")),
"Height":p arseint ($ (this). attr ("H"))
})
});
}