绵阳梓潼网站制作公司

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

这篇文章主要介绍怎么基于JavaScript实现无限加载瀑布流，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联建站主营梁河网站建设的网络公司,主营网站建设方案,重庆APP开发,梁河h5小程序定制开发搭建,梁河网站营销推广欢迎梁河等地区企业咨询

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

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

代码：

 
 
 
   
     
    瀑布流效果动态加载 
     
      * { 
        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; 
      } 
     
   
 
   
     
      
     
      
       
      
         
      
           
    
                        //随机[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();        }      }     

          以上是“怎么基于JavaScript实现无限加载瀑布流”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


          当前文章：怎么基于JavaScript实现无限加载瀑布流
          当前路径：http://myzitong.com/article/gphppc.html

          其他资讯