JS模拟瀑布流无限加载

效果图：随着鼠标往下滚动，不断加载生成不同颜色大小的图片
在这里插入图片描述

HTML

 <div id="content">
     <ul></ul>
     <ul></ul>
     <ul></ul>
     <ul></ul>
 </div>

CSS

 * {
     margin: 0;
     padding: 0;
 }
 
 #content {
     width: 1000px;
     border: 1px dashed black;
     margin: 0 auto;
     overflow: hidden;
 }
 
 #content ul {
     width: 240px;
     padding: 5px;
     float: left;
     list-style-type: none;
 }
 
 #content li {
     background-color: yellow;
     font-size: 20px;
     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.querySelectorAll("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(120, 400) + "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();
 //鼠标滚轮事件,由于右侧没有滚轮，所以使用onmousewheel事件
 window.onmousewheel = function() {
     //获取窗口的高度，要兼容浏览器
     var windowH = document.documentElement.clientHeight;
     //滚轮于top的距离，要兼容浏览器
     var scrollH = document.documentElement.scrollTop ||
         document.body.scrollTop;
     //获取窗口的可见高度
     var documentH = document.documentElement.scrollHeight ||
         document.body.scrollHeight;
     //窗口的高度 + 滚轮与顶部的距离 > 窗口的可见高度-200
     if (windowH + scrollH > documentH - 200) {
         //执行此函数 
         waterFall()
     }
 }

来源：CSDN

作者：Aurora·

链接：https://blog.csdn.net/weixin_44040583/article/details/103915439

标签

瀑布流

scrolltop

var