一个小白的开始~
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
</head>
<body>
<div id="center">
<div class="box">
<div class="pic">
<img src="img/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/4.jpg" alt="">
</div>
</div>
//.......这里有很多个.box
</div>
</body>
</html>
</body>
</html>
css代码：
*{
margin:0;
padding:0;
}
#center{
position: relative;
}
.box{
float:left;
padding:15px 0 0 15px;
}
.pic{
border:1px solid #ccc;
padding:10px;
border-radius: 5px;
}
.pic img{
width: 160px;
height:auto;
}
js代码：
window.onload = function(){
waterFull('center','box');
}
function waterFull(parent,children){
var oParent = document.getElementById(parent);
var oBoxs = getByClass(oParent,children);
var oBoxW = oBoxs[0].offsetWidth;
var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
oParent.style.cssText = 'width:'+oBoxW * cols +'px; margin: 0 auto';
//cssText 的本质就是设置 HTML 元素的 style 属性值
//定义一个数组，用来存放图片高度
for(var i = 0; i< oBoxs.length ; i++){
if(i < cols){
iHeight.push(oBoxs[i].offsetHeight);
//第一排的照片直接排列开来
}else{
//从第二排开始，找高度最小的位置
var minH = Math.min.apply(null,iHeight);
var minIndex = getMinIndex(iHeight,minH);oBoxs[i].style.position = 'absolute';
oBoxs[i].style.top= minH + 'px';
oBoxs[i].style.left = minIndex * oBoxW + 'px';
iHeight[minIndex] += oBoxs[i].offsetHeight;
}
}
}
function getByClass(parent,className){
var boxArr = new Array();
//用来获取所有class为box的元素
oElement = parent.getElementsByTagName('*');for (var i = 0; i <oElement.length; i++) {
if(oElement[i].className == className){
boxArr.push(oElement[i]);
}
};
return boxArr;
}
function getMinIndex(array,min){
for(var i in array){
if(array[i] == min)
return i;
}
}
最后效果图：
189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
