分享一个现在比较流行布局方法-瀑布流（javascript算法），欢迎留言探讨哈。演示地址就是我博客主页的照片墙模块哈。

window.onscroll=function(){
	if(isShowTwo==false){
	var allHeight=document.body.offsetHeight||document.documentElement.offsetHeight;
	  var windowHeight = document.body.offsetHeight document.body.scrollHeight ;
	
viewH =$(this).height(),
contentH =document.body.scrollHeight,//鍐呭楂樺害
scrollTop =$(this).scrollTop();//
if(contentH - viewH - scrollTop <= 100) { 
 
	   	isShowTwo=true;
	}
	}
}

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[i].style.marginLeft=20 "px":Main_Wall_Item[i].style.marginLeft=(i*220) 20*(i 1) "px";
		imgArray[i]=Main_Wall_Item[i].offsetHeight 20//;
		currentArray[i]=Main_Wall_Item[i].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[i].style.marginLeft=keyIndex*220 20*(keyIndex 1) "px";
		Main_Wall_Item[i].style.marginTop=imgArray[keyIndex] "px";
		imgArray[keyIndex] =Main_Wall_Item[i].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; 
                } 
            } 
        } 


function CreateMark(){
	$("#Main_Mark").css("height",imgArray[0] "px");
}