为什么我按老师说的做没做出来效果，求大神指教
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" href="css/main.css" rel="stylesheet" />
<script type="text/jscript" src="js/script.js"></script>
</head>
<body>
<div id="main">
<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 class="box">
<div class="pic">
<img src="images/11.jpg" />
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/12.jpg" />
</div>
</div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
#main{
margin:0 auto;
position:relative;
}
.box {
padding:15px 0 0 15px;
float:left;
}
.pic {
border:1px solid #ccc;
box-shadow:0 0 5px;
border-radius:5px;
padding:10px;
}
.pic img{
width:165px;
height:auto;
}
// JavaScript Document
window.onload=function(){
waterFall('main','box');
}
function waterFall(parent,box){
//将main下的所有box类取出来
var oParent=document.getElementById(parent);
var num=getByClass(oParent,box);
//计算整个页面显示的列数
var oBoxW=num[0].offsetWidth;
var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
oParent.style.cssText="width:"+oBoxW*cols+"px;margin:0 auto;";
//存放每一列的高度
var harr=[];
for(var i=0;i<num.length;i++){
if(i<cols){
harr.push(num[i].offsetHeight);
}
else{
var minh=Math.min.apply(null,harr); //求每一列图片的最小高度
var index=getMinhIndex(harr,minh);
num[i].style.position='absolute';
num[i].style.top=minh+'px';
//num[i].style.left=oBoxW*index+'px';
num[i].style.left=num[index].offsetLeft+'px';
harr[index]+=num[i].offsetHeight;
}
}
}
//根据class获取元素
function getByClass(parent,claNam){
var oBox=new Array(); //用来存取获取到的class为box的类
var oElements=parent.getElementsByTagName('*');
for(var i=0; i<oElements.length;i++){
if(oElements[i].className==claNam){
oBox.push(oElements[i]);
}
return oBox;
}
}
function getMinhIndex(arr,val){
for(var i in arr){
if(arr[i]==val){
return i;
}
}
}
