我是將css,js和html都寫在一起的，請(qǐng)大神幫我看看為什么實(shí)現(xiàn)不了功能呢？
<!DOCTYPE html>
<html>
<head>
? <title>瀑布流布局</title>
? <meta charset="utf-8" />
? <style>
? *{ margin:0;
? ?padding:0;}
? ?
? ?#main{ ?position:relative;}
? ?
? ?.box{ ? padding:15px 0 0 15px;
? ? ? ? ? }
? ?
? ?.pic{ ?padding:10px;
?border:1px solid #CCC;
?border-radius:5px;
?box-shadow:0 0 5px #CCC;
?float:left;
?}
.pic img{ ?width:165px;
? ? ? ? ? height:auto} ? ? ??
? </style>
? ?<script type="text/javascript" src="js/script.js"></script>
? ?<script>
? ?window.onload = function(){ ? ?
? ? ? ? waterfall('main','box');
? ?}
? ?function waterfall(parent,box){
? //將main下的所有class為box的元素取出來(lái)
? var oParent = document.getElementById(parent);
?var oBoxs=getByClass(oParent,box);
?//計(jì)算整個(gè)頁(yè)面顯示的列數(shù)（頁(yè)面寬/box寬）
?var oBoxW = oBoxs[0].offsetWidth;
?var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
?//設(shè)置main的寬帶
?oParent.style.cssText = 'width:'+oBoxW*cols+'px;margin:0 auto';
? ? ? var hArr=[];
? ? ? for(var i=0;i<oBoxs.length;i++)
?{if(i<cols){
hArr.push(oBoxs[i].offsetHeight); ?
?} ?else{var minH=Math.min.apply(null,hArr);
? ? ? ? ?var index=getMinhIndex(hArr,minH);
?oBoxs[i].style.position='absolute';
?oBoxs[i].style.top=minH+'px';
?oBoxa[i].style.left=oBoxs[index].offsetLedt+'px';
?hArr[index]+=oBoxs[i].offsetHeight;
?
?}
?}
?
? ?}
? ?//根據(jù)classs獲取元素
? ? function getByClass(parent,clsname){
? ?var boxArr = new Array();//用來(lái)存儲(chǔ)獲取到的所有class為box的元素
oElements = parent.getaElementsByTagName('*');
for(var i=0;i<oElements.length;i++)
{if(oElements[i].className==clsName){
boxArr.push(oElements[i]);
}
}
return boxArr;
}
? ?
? ?</script>
</head>
<body>
? ? <div id="main">
? ? ? <div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/0.jpg" />
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ? <div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/1.jpg" />
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ? <div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/2.jpg" />
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ? <div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/3.jpg" />
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ? <div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/4.jpg" />
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ? <div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/5.jpg" />
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ? <div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/6.jpg" />
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ? <div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/7.jpg" />
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ? <div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/8.jpg" />
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ? <div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/9.jpg" />
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ? <div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/10.jpg" />
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ? <div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/11.jpg" />
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ? <div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/12.jpg" />
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ? <div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/13.jpg" />
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ? <div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/14.jpg" />
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ? <div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/15.jpg" />
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ? <div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/16.jpg" />
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ? <div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/17.jpg" />
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ? <div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/18.jpg" />
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ? <div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/19.jpg" />
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ? <div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/20.jpg" />
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ? <div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/21.jpg" />
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ? <div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/22.jpg" />
? ? ? ? ? </div>
? ? ? ? ? ?<div id="box">
? ? ? ? ? <div class="pic">
? ? ? ? ? ? ? ? <img src="images/23.jpg" />
? ? ? ? ? </div>
? ? ? ?</div>
? ? ? ?</div>
?
? ? </div>
</body>
</html>
2016-10-17
拼寫錯(cuò)誤，還有g(shù)etMinhIndex 這個(gè)函數(shù)都沒有封裝，請(qǐng)你打開你的開發(fā)者工具檢查你的代碼錯(cuò)誤。
2016-10-11
你直接調(diào)用這個(gè)函數(shù)嗎 ?var index=getMinhIndex(hArr,minH);?
function getMinhIndex(arr, val){
for(var i=0; i<arr.length; i++){
if(arr[i]=val){
return i;}
}
}