基于JavaScript实现无限加载瀑布流

本文实例为大家分享了JS实现无限加载瀑布流展示的具体代码，供大家参考，具体内容如下

1.在外层的div中，插入4个ul，ul左浮动
2.每次在创建节点之后，插入节点之前，要获取每个ul的高度，找到最小的高度，然后将新创建的li节点插入该ul中
3.当文档的高度 - 文档的可视高度 <= 鼠标的滑动距离时 开始继续创建节点

代码：

<!DOCTYPE html>
<html> 

  <head>
    <meta charset="UTF-8">
    <title>瀑布流效果动态加载</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      } 

      #content {
        width: 1000px;
        border: 3px solid red;
        margin: 0 auto;
        overflow: hidden;
      } 

      #content > ul {
        width: 240px;
        padding: 4px;
        border: 1px solid blue;
        float: left;
        list-style-type: none;
      } 

      #content > ul > li {
        background-color: yellow;
        font-size: 100px;
        color: white;
        text-align: center;
        margin-bottom: 5px;
      }
    </style>
  </head> 

  <body>
    <div id="content">
      <ul></ul>
      <ul></ul>
      <ul></ul>
      <ul></ul>
    </div>
  </body>
  <script type="text/javascript">
    //随机[m,n]之间的整数
    function randomNumber(m, n) {
      return Math.floor(Math.random() * (n - m + 1) + m);
    }
    //随机颜色
    function randomColor() {
      return "rgb(" + randomNumber(0, 255) + "," + randomNumber(0, 255) + "," + randomNumber(0, 255) + ")";
    }
    //获取当前的scrollTop
    var scrollTopDistance;
    //获取所有的ul
    var uls = document.getElementsByTagName("ul");
    var i = 0;
    var k = i;
    function waterFall(){
      for (i = k;i < k + 4;i++) {
        //创建li
        var li = document.createElement("li");
        //随机颜色
        li.style.backgroundColor = randomColor();
        //随机高度
        li.style.height = randomNumber(150, 500) + "px";
        //手动转换为字符串
        li.innerHTML = i + 1 + "";
        //插入到对应的ul中
        //判断哪个ul的高度低，该次创建的li就插入到此ul中
        var index = 0; //记录下标
        for (var j = 0; j < uls.length; j++) {
          if (uls[j].offsetHeight < uls[index].offsetHeight) {
            index = j;
          }
        }
        //将元素节点插入文档中
        uls[index].appendChild(li);
      }
      k = i;
      return uls[index].offsetHeight;
    }
    waterFall();
    var height;
    //无限加载瀑布流方法，核心思想就是
    document.onmousewheel = function(){
      //文档的高度 - 文档的可视高度 < 鼠标的滑动距离 时开始加载图片
      height = document.body.clientHeight - document.documentElement.clientHeight;
      if(height <= document.body.scrollTop){
        waterFall();
      }
    }
  </script>
</html> 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。