HTML5 图片瀑布流布局

先简短的说下原理，在给出源代码。 瀑布流的元素块（div）宽度统一，高度不一致（随里面内容增加而增加）。 瀑布流的元素块（div）Position属性为absolute或者relative，采用这2中布局方式是为了让元素块能够绝对定位。 第一层高度是统一的，随后增加层数的时候以当前元素的上面的元素块高度为准，依次往下堆叠。 在每放下一层的时候先放在上一层中高度最低的元素后面，依次递归。 预览网址：http://www.pengyaou.com/ImageWall/ 源代码（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;                  }              }          }

转载于:https://my.oschina.net/u/1053786/blog/211633