為什么我按老師說(shuō)的做沒(méi)做出來(lái)效果，求大神指教
<!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>無(wú)標(biāo)題文檔</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類取出來(lái)
var oParent=document.getElementById(parent);
var num=getByClass(oParent,box);
//計(jì)算整個(gè)頁(yè)面顯示的列數(shù)
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;
}
}
}
//根據(jù)class獲取元素
function getByClass(parent,claNam){
var oBox=new Array(); //用來(lái)存取獲取到的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;
}
}
}
2015-12-10
<!DOCTYPE?html> <html> <head> ????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> ????<title>無(wú)標(biāo)題文檔</title> ????<style> ????????*?{ ????????????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; ????????} ????</style> ????<script> ????????window.onload=function(){ ????????????waterFall('main','box'); ????????} ????????function?waterFall(parent,box){ //將main下的所有box類取出來(lái) ????????????var?oParent=document.getElementById(parent); ????????????var?num=getByClass(oParent,box); //計(jì)算整個(gè)頁(yè)面顯示的列數(shù) ????????????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; ????????????????} ????????????} ????????} ????????//根據(jù)class獲取元素 ????????function?getByClass(parent,claNam){ ????????????var?oBox=new?Array();?//用來(lái)存取獲取到的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; ????????????????} ????????????} ????????} ????</script> </head> <body> <div?id="main"> ????<div?class="box"> ????????<div?class="pic"> ????????????<img??src="http://img1.sycdn.imooc.com//5668dc790001aa2b06000338-240-132.jpg"/> ????????</div> ????</div> ????<div?class="box"> ????????<div?class="pic"> ????????????<img??src="http://img1.sycdn.imooc.com//5668dc790001aa2b06000338-240-135.jpg"?/> ????????</div> ????</div ????><div?class="box"> ????<div?class="pic"> ????????<img??src="http://img1.sycdn.imooc.com//5668dc790001aa2b06000338-240-135.jpg"?/> ????</div> </div> ????<div?class="box"> ????????<div?class="pic"> ????????????<img??src="http://img1.sycdn.imooc.com//5668dc790001aa2b06000338-240-135.jpg"?/> ????????</div> ????</div ????><div?class="box"> ????<div?class="pic"> ????????<img??src="http://img1.sycdn.imooc.com//5668dc790001aa2b06000338-240-134.jpg"?/> ????</div> </div> ????<div?class="box"> ????????<div?class="pic"> ????????????<img??src="http://img1.sycdn.imooc.com//5668dc790001aa2b06000338-240-135.jpg"?/> ????????</div> ????</div> ????<div?class="box"> ????????<div?class="pic"> ????????????<img??src="http://img1.sycdn.imooc.com//5668dc790001aa2b06000338-240-132.jpg"?/> ????????</div> ????</div> ????<div?class="box"> ????????<div?class="pic"> ????????????<img??src="http://img1.sycdn.imooc.com//5668dc790001aa2b06000338-240-135.jpg"?/> ????????</div> ????</div> ????<div?class="box"> ????????<div?class="pic"> ????????????<img??src="http://img1.sycdn.imooc.com//5668dc790001aa2b06000338-240-135.jpg"?/> ????????</div> ????</div> </div> </body> </html>