<!DOCTYPE?html>
<html>
?<head>
???<title>瀑布流布局</title>
<meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8"?/>
<style?type="text/css">
????*{padding:?0;margin:0;}
????#main{
????????position:?relative;
????}
????.box{
/*paddin和margin，為了把盒子與盒子之間的距離拉開。因?yàn)樵趈s中獲取每個數(shù)據(jù)塊的高度，offsetHeight可以獲取包括padding在內(nèi)的高度，而不能獲取margin。*/
????????padding:?15px?0?0?15px;
????????float:left;
border:1px?solid?red;
????}
????.pic{
????????padding:?10px;
????????border:1px?solid?#ccc;
????????pic-shadow:?0?0?6px?#ccc;
????????border-radius:?5px;
????}
????.pic?img{
????????width:162px;
????????height:auto;
????}
</style>
<script?type="text/javascript">
?window.onload=function(){
?????waterfall('main','box');
?}
?
function?waterfall(parent,box){
??var?oParent=document.getElementById(parent);
??var?oBoxs=getByClass(oParent,box);
??var?oBoxwidth=oBoxs[0].offsetWidth;
??var?winW=document.documentElement.clientWidth?||?document.body.clientWidth;
??var?cols=Math.floor(winW/oBoxwidth);
??oParent.style.cssText="width:"+cols*oBoxwidth+"px;margin:0?auto;";
?? var?picH=[];
for(var?i=0,l=oBoxs.length;i<l;i++){
????if(i<cols){
???????//?將圖片的高度值添加到數(shù)組中
???? picH[i]=oBoxs[i].offsetHight;
}else{
??????//?求最小值和最小值的索引
var?minH=Math.min.apply(null,picH);//注意必須有null
var?minHindex=getMinhIndex(picH,minH);
????
//?計(jì)算及定義圖片出現(xiàn)的位置
??????oBoxs[i].style.position='absolute';
??oBoxs[i].style.top=minH+'px';
??????oBoxs[i].style.left=oBoxs[minHindex].offsetLeft+'px';
??????console.log(oBoxs[i].offsetLeft);
??????//?改變數(shù)組值
?????picH[minHindex]+=oBoxs[i].offsetHeight;
????}
??}
?}?
?
function?getByClass(parent,clsName){
??var?boxArr=new?Array(),?
??????oElements=parent.getElementsByTagName('*');
??for(var?i=0;i<oElements.length;i++){
????if(oElements[i].className==clsName){
??????boxArr.push(oElements[i]);
????}
??}
??return?boxArr;
}
//?求值在數(shù)組中的索引,arr接收的是數(shù)組，val接收的是判斷的值
function?getMinhIndex(arr,val){
for(var?i?in?arr){
if(arr[i]==val){
return?i;
}
}
}
</script>
?</head>
?<body>
?????<div?id="main">
? <div?class="box">
? <div?class="pic">
? <img?src="images/0.jpg"?/>
? </div>
? </div>
? <div?class="box">
? <div?class="pic">
? <img?src="images/1.jpg"?/>
? </div>
? </div>
? <div?class="box">
? <div?class="pic">
? <img?src="images/2.jpg"?/>
? </div>
? </div>
? <div?class="box">
? <div?class="pic">
? <img?src="images/3.jpg"?/>
? </div>
? </div>
?? <div?class="box">
? <div?class="pic">
? <img?src="images/4.jpg"?/>
? </div>
? </div>
?? <div?class="box">
? <div?class="pic">
? <img?src="images/5.jpg"?/>
? </div>
? </div>
?? <div?class="box">
? <div?class="pic">
? <img?src="images/6.jpg"?/>
? </div>
? </div>
? <div?class="box">
? <div?class="pic">
? <img?src="images/7.jpg"?/>
? </div>
? </div>
? <div?class="box">
? <div?class="pic">
? <img?src="images/8.jpg"?/>
? </div>
? </div>
? <div?class="box">
? <div?class="pic">
? <img?src="images/9.jpg"?/>
? </div>
? </div>
?? <div?class="box">
? <div?class="pic">
? <img?src="images/10.jpg"?/>
? </div>
? </div>
</div>
</body>
</html>
2016-06-28
45行代碼offsetHeight 打錯了，不知是不是這個！