怎么基于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实现无限加载瀑布流
分享URL：http://cdxtjz.cn/article/gphppc.html

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

其他资讯