HTML5图片瀑布流布局:
源代码(Javascript): var tops=0; var imgCount=0;//图片数目 var imgArray=new Array();//存放高度数组 var isChangeH=false; var index=0; var isShowTwo=false; function GetImage(value){ var Main_Wall_Item=$("#"+value+" > .Main_Wall_Item"); var Main_Wall_ItemImg=$(".Main_Wall_Item >img"); Main_Wall_ItemImg.click(function(){ if(isChange==false){ isChange=true; var localHeight=$(this)[0].offsetHeight; var localParentHeight=$(this).parent()[0].offsetHeight; $(this).parent().css("z-index",112); $(this).animate({height: 500+"px",width: 500+"px"}, 600); $(this).parent().animate({height: 500+"px",width: 500+"px"}, 600); $(this).click(function(){$(this).parent().css("z-index",1);$(this).animate({height: localHeight+"px",width: 190+"px"}, 600);$(this).parent().animate({height: localParentHeight+"px",width: 220+"px"}, 600,function(){isChange=false});}); } }); var currentArray=new Array(); imgCount=Main_Wall_Item.length; for(var i=0;i<=3;i++){ i==0?Main_Wall_Item.style.marginLeft=20+"px":Main_Wall_Item.style.marginLeft=(i*220)+20*(i+1)+"px"; imgArray=Main_Wall_Item.offsetHeight+20//; currentArray=Main_Wall_Item.offsetHeight+20//; } for(var i=4;i<imgCount;i++){ currentArray.sort(function(a,b){return a>b?1:-1}); var keyIndex=parseInt(getMinHeightKey(imgArray,currentArray[index])); Main_Wall_Item.style.marginLeft=keyIndex*220+20*(keyIndex+1)+"px"; Main_Wall_Item.style.marginTop=imgArray[keyIndex]+"px"; imgArray[keyIndex]+=Main_Wall_Item.offsetHeight+20; index++; if(index%4==0){ currentArray[0]=imgArray[3]; currentArray[1]=imgArray[2]; currentArray[2]=imgArray[1]; currentArray[3]=imgArray[0]; index=0; } } $(".Main_Wall_Item").animate({opacity: 1}, 1000); document.getElementById("Main_Wall_Live").style.marginTop=imgArray[0]+"px"; document.getElementById("Main_Mark_Two").style.marginTop=imgArray[0]-10+"px"; tops=imgArray[0]; } //获取数组中高度最小的 function getMinHeightKey(arr,minH){ for(key in arr){ if(arr[key] == minH){ return key; } } } |
HTML5 图片瀑布流布局
最新推荐文章于 2024-05-30 21:20:12 发布