<!Doctype>
<html>
<head>
<title>瀑布流布局</title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/script.js"></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>
<script type=”text/javascript”>
window.onload=function(){
waterfall('main','box');
}
function waterfall(parent,box){
var oParent=document.getElementById(parent);
var oBoxs=getByClass(oParent,box);
for(var i=0;i<oBoxs.length;i++){
if(i<cols){
// 將圖片的高度值添加到數組中
}else{
// 求最小值和最小值的索引
// 計算及定義圖片出現的位置
oBoxs[i].style.position='absolute';
// 改變數組值
}
}
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;
}
</script>
// 求值在數組中的索引,arr接收的是數組，val接收的是判斷的值
function getMinhIndex(arr,val){
}
