首先来看下最终的效果图：
有人可能看到这个会觉得，这有什么难的，这么简单的事，楼主是不是太小提大作了？当你真正去尝试时，你才知道到底有什么难点。
首先，我们来讲下需求：
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);
$(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))
})
});
}