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