浏览网页的时候经常会遇到瀑布流布局的网站。也许有些读者不了解瀑布流。瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。比如下面图片的效果（百度图片），就是一个典型的瀑布流。
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>
作者：小屋
链接：http://www.rumenwu.com/operate/585.html
来源：入门屋
入门屋著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台，如有侵权请联系删除。
支付宝打赏 
微信打赏 