js实现图片放大缩小功能后复杂排序的方法

这是一个基于jquery的图片效果。它的功能是当图片点击变大(变小)时，按照一定的规则对其他图片进行排序。先看最终效果图：

有些人可能看到这个会想，这有什么难的？楼主提这么简单的事情是不是太小了？当你真正尝试的时候，你就会知道困难是什么。首先来说说要求：1。图片分为大小图和小图，大图占据四个小图的位置；2.点击图片放大缩小，重新排列顺序；3.当点击偶数系列(2，4)时，它前面的项目会被推到后面；4.第一个物品不能移动，第二个会占据第三和第四个的位置，第一个小的会放在后面。这就是需求。现在是不是更难了？我的想法是按照这个需求一步一步实现。

代码如下：复制代码代码如下：var elemArr=$('#old ').查找('里').get()；var arrCol=[0，0，0，0]；var defaultSize=211函数设置位置(elemArr，内容，旧内容){//提醒(elemArr。长度)if(elemArr。长度==0){ $(旧内容).移除();动画(内容。find(' Li ')；var max=Math.max(arrCol[0]，arrCol[1]，arrCol[2]，arrCol[3]) $(内容)。父项()。高度（最大值);$(内容)。高度（最大值);返回；} var item=$(elemarr。shift())；if(项目。有类(' big '){//大var min=computeMin(内容);var x=min . xvar y=min . yif(x==DefaultSize){ var tmp=$(' Li[x=' 0 '][y=' y ' ']'，content)；if(tmp。有类(' static '){//第一个/* ArrCol[1]=0；x=2 * DefaultSizeif($(' Li[x=' x ' '][y=' y ' ']'，内容)。size()0){ y=ParSeint($(' Li[x=' x ' '][y=' y ' ']'，内容)。attr(' y ')2 * DefaultSize；} ArrCol[1]=0；*/elemArr=insertsmallar(elemArr，item)；设置位置（电子邮件、内容、旧内容);返回；} else { elemArr=$(' Li[x=' 0 '][y=' y ' ']'，内容)。get().concat(elemArr)；//$(' Li[x=' 0 '][y=' y ' ']'，内容)。移除();x-=DefaultSize；arr col[0]-=DefaultSize；} } if(x==DefaultSize * 3){ elemArr=$(' Li[x=' DefaultSize * 2 ' '][y=' y ' ']'，content).get().concat(elemArr)；//$(' Li[x=' 200 '][y=' y ' ']'，内容)。移除();x-=DefaultSize；arr col[2]-=DefaultSize；} item.attr({'top':y，' left':x}).attr({'x':x，' y ' :y })；if(x==0){ arrCol[0]=DefaultSize * 2；arr col[1]=DefaultSize * 2；} if(x==DefaultSize * 2){ ArrCol[2]=DefaultSize * 2；arr col[3]=DefaultSize * 2；} }else{ //小var min=computeMin(内容);var x=min . xvar y=min . yitem . 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；} } $(内容)。追加（项目)设置位置（电子邮件、内容、旧内容);} setPosition(elemArr，$("# news ")，$(" # old "))；函数insertSmallArr(arr，item){ arr=item.get().concat(arr)；var TMParr=[]；var first=nullfor(var I=arr。长度-1；I=0；i - ){ if(！$(arr[i]).有类(' big '){ first=arr[I]；打破；} } if(first){ tmparr。推(第一个)；} for (var i=0，l=arr.lengthili ){如果(第一！==arr[I]){ tmparr。推动；} }返回函数Computemin(content){ var arr=$(content).find(' Li ')；var miny=Math.min(arrCol[0]，arrCol[1]，arrCol[2]，arr col[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；}返回{x:minx，y : miny }；} $('#main_content ').委托(' li '，' click '，function(){ if ($(this)).index()==0){ 0返回false} if(！$(这个)。有类(' big '){ $(this).attr({'h':417，' w':417}) }else{ $(this).attr({'h':206，' w':206}) } $(this).切换类(' big ')；$(这个)。父项()。hide()；var c=$(这个)。父项()。儿童();c.attr({'x':0，' y ' :0 })；arrCol=[0，0，0，0]；var TMParr=c . get()；定义变量内容=$(' ul/ul ')；$('#main_content ').追加（内容);设置位置(tmpArr，content，$(this)).parent())；}) $('#addNews ').单击(function(){ var parent=$(this)).最接近(' ul ')；$(这个)。父项()。在(“linews/li”)之后；var c=父级。儿童()；var TMParr=c . get()；定义变量内容=$(' ul/ul ')；$('#main_content ').追加（内容);父母。hide()；arrCol=[0，0，0，0]；设定位置(tmpArr，内容，父级);});函数动画制作(arr){ $(arr).每个（函数(){ $(此)).动画({ 'top':parseInt($(this)).attr('top ')，' left':parseInt($(this).attr('left ')，' width':parseInt($(this).attr('w ')，' height':parseInt($(this).attr('(h ')})}))；}