瀑布流是布局，是比较流行的一种网页布局，今天就分享一下瀑布流原生js代码。
js代码分享：
//封装一个随机函数
function rnd(n,m){
return parseInt(Math.random()*(m-n))+n;
}
//创建一个li
function creatLi(){
var oLi=document.createElement('li');
oLi.style.height=rnd(150,500)+'px';
oLi.style.background='rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')'
return oLi;
}
window.onload=function(){
var aUl=document.getElementsByTagName('ul');
//创建一屏数据 就是创建并添加20个li
function creatLi20(){
for(var i=0;i<20;i++){
var oLi=creatLi()
var arrUl=[];
for(var j=0;j<aUl.length;j++){
arrUl.push(aUl[j]);
}
arrUl.sort(function(n,m){
return n.offsetHeight-m.offsetHeight;
})
arrUl[0].appendChild(oLi);
}
}
//先添加一屏li
creatLi20()
//判断滚动高度实时创建Li
window.onscroll=window.onresize=function(){
//获取滚动的高度
var scrollTop=document.documentElement.scrollTop|| document.body.scrollTop;
//获取可视区的高度
var clientH=document.documentElement.clientHeight;
var scrollH=document.documentElement.scrollHeight;
if(scrollTop+clientH>=scrollH-300){
creatLi20()
}
}
}html代码
<body> <ul></ul> <ul></ul> <ul></ul> <ul></ul> </body>
