欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-20 20:44:40
当滚动条接近底部会自动生成新的内容（色块） 效果图： 代码如下：

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

效果图：

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

代码如下：

<!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>

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

上一篇： Photoshop利用画笔制作抽象的喷溅人像海报

下一篇： 惠州有什么特产 去惠州必带特产大全

推荐阅读