js实现图片放大缩小后进行的复杂排序

js实现图片放大缩小后进行的复杂排序

作者：田想兵 博客地址:http://www.cnblogs.com/tianxiangbing

这是一个基于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);
        $(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;i<l ;i++ ){
        if (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 = $('<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":parseInt($(this).attr("top")),
        "left":parseInt($(this).attr("left")),
        "width":parseInt($(this).attr("w")),
        "height":parseInt($(this).attr("h"))
        })
    });
  }

 

 如果不懂的话，就多看几篇吧，或者加入我的QQ群77813547，

这篇文章的实例请点击这里 

http://www.lovewebgames.com/demo/photoSort.html