瀑布流布局原理:将多个ul通过浮动并排显示,首先为它们依次添加第一行元素后,我们获取每一列ul的高度,然后在高度最小的那一列元素下继续排列下面的元素。以下为相应代码以及注释。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding: 0;}
li{list-style: none;}
#box{margin:0 auto;width:700px;}
ul{width: 200px;float:left;margin:0 auto;margin-right: 10px;}
img{width:200px;padding-top: 10px;}
</style>
<script>
window.onload = function(){
var oUl = document.getElementsByTagName('ul');
//最小高度
function min_height(){
var index = 0;
var minUl = oUl[0].offsetHeight; //先把第一个ul的值赋给minUl(高度最小的ul)
for(var i = 0; i < oUl.length; i ++){//遍历ul的长度,获取高度最小的ul,并获取其下标
if(oUl[i].offsetHeight < minUl){
minUl = oUl[i].offsetHeight;
index = i;
}
}
return index; //将下标返回出去
}
jiazai();
//加载图片
function jiazai(){
for(var i = 1; i < 15; i ++){ //遍历图片
var oLi = document.createElement('li'); //自动创建li
var oImg = document.createElement('img'); //自动创建img
oImg.src = "images/" + i + ".jpg"; //给img添加src属性
oLi.appendChild(oImg); //将img添加到li里
oUl[min_height()].appendChild(oLi); //将li添加到ul里
}
}
//滚动
document.onscroll = function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//处理兼容
var clientH = document.documentElement.clientHeight; //浏览器的可视高度
//document.body.scrollHeight:页面元素的滚动高度(页面内容的实际高度)
if(scrollTop + clientH >= document.body.scrollHeight * 0.8){
jiazai();
}
};
};
</script>
</head>
<body>
<div id="box">
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
</html>