HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/waterfall.css" />
</head>
<body>
<div id="main">
<div class="pic_box">
<div class="pic">
<img src="img/kjhot_3.png" >
</div>
</div>
<div class="pic_box">
<div class="pic">
<img src="img/pic_1.png" >
</div>
</div>
<div class="pic_box">
<div class="pic">
<img src="img/pic4.jpg" >
</div>
</div>
<div class="pic_box">
<div class="pic">
<img src="img/kjhot_3.png" >
</div>
</div>
<div class="pic_box">
<div class="pic">
<img src="img/pic_1.png" >
</div>
</div>
<div class="pic_box">
<div class="pic">
<img src="img/pic4.jpg" >
</div>
</div>
<div class="pic_box">
<div class="pic">
<img src="img/pic_1.png" >
</div>
</div>
<div class="pic_box">
<div class="pic">
<img src="img/kjhot_3.png" >
</div>
</div>
<div class="pic_box">
<div class="pic">
<img src="img/pic_1.png" >
</div>
</div>
<div class="pic_box">
<div class="pic">
<img src="img/kjhot_3.png" >
</div>
</div>
<div class="pic_box">
<div class="pic">
<img src="img/pic_1.png" >
</div>
</div>
<div class="pic_box">
<div class="pic">
<img src="img/kjhot_3.png" >
</div>
</div>
<div class="pic_box">
<div class="pic">
<img src="img/pic4.jpg" >
</div>
</div>
<div class="pic_box">
<div class="pic">
<img src="img/kjhot_3.png" >
</div>
</div>
<div class="pic_box">
<div class="pic">
<img src="img/pic_1.png" >
</div>
</div>
<div class="pic_box">
<div class="pic">
<img src="img/pic4.jpg" >
</div>
</div>
</div>
<script type="text/javascript" src="js/waterfall.js" ></script>
</body>
</html>
Css：
*{
margin: 0;
padding: 0;
}
#main{
position: relative;
width: 900px;
}
.pic_box{
padding: 15px 0 0 15px;
float: left;
}
.pic{
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ccc;
}
.pic img{
width: 165px;
height: auto;
}
Js：
//window.load这个应该只是表明事件方法，但并未执行
//window.onload 这个表示加载完页面所有东西以后才执行，在页面只允许出现一个onload函数，因为它可编函数个数只有一个
window.onload = function(){
waterfall('main','pic_box');
}
function waterfall(parent,childent){
//获取大盒子
var oParent = document.getElementById(parent);
//获取所有含有class为pic_box的盒子
var oBox = getpicbox(oParent,childent);
//获取一列的宽度
var oWidth = oBox[0].offsetWidth;
//计算列数,使用舍入计算
var cols = Math.floor(oParent.clientWidth/oWidth); //获取大盒子宽度
// var cols = Math.floor(document.documentElement.clientWidth/oWidth); //获取窗口宽度
//设置大盒子样式
oParent.style.cssText='margin:0 auto;';
// oParent.style.cssText='width:' + oWidth * cols + 'px;margin:0 auto;'; //设置总宽度
//定义数组获取每行的高度，并设置排列
var arrH = [];
// var arrH = new Array();
for(var i = 0;i < oBox.length;i++){
if(i < cols){
//将第一列的高度存入数组中
arrH.push(oBox[i].offsetHeight); //offsetHeight=内容高+padding+边框
}
//当i>cols时，对前面所有的图片高度进行遍历，将下一张图片放到合适的位置
else{
//获取前面的最小高度
var minH = Math.min.apply(null,arrH);
//获取最小高度的下标
var minIndex = getminIndex(arrH,minH);
//对图片进行排列
oBox[i].style.position = 'absolute';
oBox[i].style.top = minH + 'px';
oBox[i].style.left = minIndex * oWidth + 'px';
//更新数组,更新的高度=原来的高度+新加的盒子高度
arrH[minIndex] += oBox[i].offsetHeight;
// arrH[minIndex] = arrH[minIndex] + oBox[i].offsetHeight;
}
}
}
//获取所有图片盒子并存到数组中
function getpicbox(parent,classname){
var picboxArr = new Array();
//获取大盒子下的所有标签
picboxItem = parent.getElementsByTagName('*');
//筛选需要的盒子标签，并存放到数组中
for(var i = 0;i < picboxItem.length; i++){
if(picboxItem[i].className == classname){
picboxArr.push(picboxItem[i]);
}
};
return picboxArr;
}
//获取高度最小值
function getminIndex(array,min){
//遍历数组
for(var i in array){
//筛选高度最小值下标
if(array[i] == min){
return i;
}
}
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
