为什么我按老师说的做没做出来效果，求大神指教
xiao55555
2015-12-10 20:33
<!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;
}
}
}
1回答
-
- 李晓健
- 2015-12-10 21:08:05
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</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类取出来 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; } } } </script> </head> <body> <div id="main"> <div class="box"> <div class="pic"> <img src="http://img.mukewang.com/5668dc790001aa2b06000338-240-132.jpg"/> </div> </div> <div class="box"> <div class="pic"> <img src="http://img.mukewang.com/5668dc790001aa2b06000338-240-135.jpg" /> </div> </div ><div class="box"> <div class="pic"> <img src="http://img.mukewang.com/5668dc790001aa2b06000338-240-135.jpg" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://img.mukewang.com/5668dc790001aa2b06000338-240-135.jpg" /> </div> </div ><div class="box"> <div class="pic"> <img src="http://img.mukewang.com/5668dc790001aa2b06000338-240-134.jpg" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://img.mukewang.com/5668dc790001aa2b06000338-240-135.jpg" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://img.mukewang.com/5668dc790001aa2b06000338-240-132.jpg" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://img.mukewang.com/5668dc790001aa2b06000338-240-135.jpg" /> </div> </div> <div class="box"> <div class="pic"> <img src="http://img.mukewang.com/5668dc790001aa2b06000338-240-135.jpg" /> </div> </div> </div> </body> </html>
瀑布流布局
97759 学习 · 736 问题
相似问题