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 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 图片瀑布流布局

你可能感兴趣的:(HTML5 图片瀑布流布局)