189 8069 5689

怎么基于JavaScript实现无限加载瀑布流-创新互联

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

成都创新互联专注于雨山企业网站建设,响应式网站建设,商城系统网站开发。雨山网站建设公司,为雨山等地区提供建站服务。全流程按需定制开发，专业设计，全程项目跟踪，成都创新互联专业和态度为您提供的服务

本文实例为大家分享了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实现无限加载瀑布流”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联网站建设公司行业资讯频道！

          另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


          当前标题：怎么基于JavaScript实现无限加载瀑布流-创新互联
          文章来源：http://cdxtjz.com/article/dhegod.html

          其他资讯