浏览网页的时候常常会碰着瀑布流布局的网站。大概有些读者不理解瀑布流。瀑布流，又称瀑布流式布局。是比较盛行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。比如下面图片的效果（百度图片），便是一个范例的瀑布流。
js瀑布流加载
网上有很多JQ的瀑布流插件，而且都写好了兼容，都可以考试测验去利用，这里只是跟大家分享一下原生js实现瀑布流的效果，一起学习。为了方便演示区分，我利用的是加背景数字方框的瀑布流，如果你要练习可以利用本地图片来测试！
js实现瀑布流
当滚动条到最下，往下拖动就会连续加载（如下图）：
js瀑布流演示
js实现瀑布流源码：<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset=\公众utf-8\公众>
<style type=\公众text/css\"大众>
{
margin: 0;
padding: 0;
}
div {
width: 900px;
border: 1px solid blue;
margin: 0 auto;
float: left;
margin-left: 62px;
}
ul {
width: 280px;
border:1px solid red;
float: left;
margin: 5px;
}
li {
border: 1px solid green;
list-style-type: none;
margin: 5px;
}
</style>
<script type=\公众text/javascript\"大众>
window.onload = function ()
{
var oUl = document.getElementsByTagName('ul');
var arr = [];
var n = 0;
var arrColor = ['red', 'orange', 'yellow', 'green', 'lime', 'blue', 'purple'];
for (var i = 0; i < oUl.length; i++) {
arr.push(oUl[i]);
}
createLi();
//求出可视区的高度
var clientHeight = document.documentElement.clientHeight;
window.onscroll = function ()
{
//求出滚轮的高度
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
//求出滚轮滚动的最大高度
var scrollMaxTop = document.body.scrollHeight;
if ((clientHeight + scrollTop) >= scrollMaxTop) {
if (n > 6) {
return false;
}
createLi();
}
}
function createLi()
{
n++;
for (var i = 0; i < 20; i++) {
//对每一个ul中创建li元素
var li = document.createElement('li');
var oHeight = rnd(100, 300);
li.style.height = oHeight + 'px';
li.innerHTML = i;
li.style.lineHeight = oHeight + 'px';
li.style.fontSize = '50px';
li.style.textAlign = 'center';
li.style.background = arrColor[n-1];
//追加li元素,并且追加到最短的下边
arr.sort(function(a, b){
return a.offsetHeight - b.offsetHeight;
});
arr[0].appendChild(li);
}
}
function rnd(n, m)
{
return parseInt(Math.random()(m-n+1)+n);
}
}
</script>
</head>
<body>
<div>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
</html>
如果有任何疑问或者不懂的地方，欢迎评论留言，我们看到后会第一韶光问您解答！
感激!
