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

时间：2017-03-16|栏目：JavaScript|点击：次 |我要投稿

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

效果图：

代码如下：

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

原文链接：http://www.qdfuns.com/notes/42016/56aca9664e87259e597f51c7c8d5066e.html

(资源库 www.zyku.net)

JS 瀑布流

上一篇：js清除浏览器缓存的几种方法

栏目：JavaScript

下一篇：php与javascript正则匹配中文的方法分析

本文标题：js实现瀑布流效果（自动生成新的内容）

本文地址：https://www.zyku.net/js/1248.html

更多互联网推荐教程

JavaScript

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

您可能感兴趣的文章

最近更新

阅读排行

猜你喜欢