js实现瀑布流效果（自动生成新的内容）

2019-11-19 17:08:23

字体：大中小

来源：转载

供稿：网友

当滚动条接近底部会自动生成新的内容（色块）

效果图：

代码如下：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <style>    *{list-style: none;}    div{overflow: hidden;}    ul{float: left;}    li{width:300px; margin-bottom:10px;}  </style>  <script>    function rnd(n,m){      return parseInt(Math.random()*(m-n))+n;    }    function cl(){      var li = document.createElement('li');      li.style.height=rnd(100,500)+'px';      li.style.background='rgb('+rnd(0,255)+','+rnd(0,255)+','+rnd(0,255)+')';      return li;    }    window.onload=function(){      var aUl = document.getElementsByTagName('ul');      //alert(aUl.length);      function c20(){        for(var i =0;i<20;i++){          var arr =[];          for(var j=0;j<aUl.length;j++){            arr.push(aUl[j])          }          arr.sort(function(n,m){            return n.offsetHeight- m.offsetHeight          });          arr[0].appendChild(cl());        }      }      c20();      window.onscroll=function(){        var arr = [];        for (var j = 0; j < aUl.length; j++) {          arr.push(aUl[j])        }        arr.sort(function (n, m) {          return n.offsetHeight - m.offsetHeight        });        var n = (document.body.scrollTop || document.documentElement.scrollTop) + document.documentElement.clientHeight;        if (n > arr[0].offsetHeight) {          c20()        }      }    }  </script></head><body><div>  <ul></ul>  <ul></ul>  <ul></ul></div></body></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：JavaScript实现简单精致的图片左右无缝滚动效果

下一篇：es6的数字处理的方法（5个）