ajax鼠标滚动到网页底部实现局部刷新~瀑布流

最新推荐文章于 2022-07-05 19:27:12 发布

谁牵引了你的泪

最新推荐文章于 2022-07-05 19:27:12 发布

阅读量575

点赞数

分类专栏： javascript ajax 文章标签：鼠标滚动 ajax 局部刷新

本文链接：https://blog.csdn.net/king_spunch/article/details/51787260

版权

javascript 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

ajax

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>瀑布流</title>
       <link rel="stylesheet" href="base.css" />
       <script src="ourAjax.js"></script>
       <script>
           window.onload = function(){
               var cols = document.querySelectorAll(".col");//选择器dom操作方法 //通过选择器拿到对应标签
               document.body.οnscrοll=document.documentElement.onscroll = function(){//特殊的兼容写法，兼容滚动高度
                   ajax({
                       method:"get",
                       url:"data.json",//通过地址直接请求数据
                       success:function(data){               //数据请求成功之后执行的处理程序
                           var obj = JSON.parse(data);       //将请求得到的json格式的数据转化为可以使用的json对象
                           //console.log(obj);
                           //当前浏览器的高度
                           var cHeight = document.documentElement.clientHeight;
                           //滚动条距离顶部的距离
                           var sTop = document.body.scrollTop||document.documentElement.scrollTop;
                           //文档的高度
                           var pHeight = document.body.scrollHeight;
                           document.title = cHeight;
                           //alert(1)
                           var flag = cHeight + sTop==pHeight;//滚动条距离顶部的距离+当前浏览器的高度==文档的高度为真
                           if(flag){
                               addImg(obj.datas);添加图片
                           }




                       },
                       error:function(mes){
                           //console.log(mes)
                       }
                   })
               }

               function addImg(arr){
                   for(var i = 0;i<arr.length;i++){
                       var box = document.createElement("div");
                       box.className = "box";
                       box.innerHTML = '<img src="images/'+arr[i]+'" />';
                       var col = getMinHeight(cols);
                       col.appendChild(box);

                   }
               }

               /*
                   高度最小的列dom对象
               */
               function getMinHeight(cols){
                   var min = cols[0]; //高度最小的列dom对象
                   for(var i = 0;i<cols.length;i++){
                       if(min.offsetHeight>cols[i].offsetHeight){
                           min = cols[i];
                       }
                   }
                   return min;
               }
           }
       </script>

   </head>
   <body>
        <div id="container">
            <div class="col">
               <div class="box">
                   <img src="images/0.jpg" />
               </div>
               <div class="box">
                   <img src="images/4.jpg" />
               </div>
               <div class="box">
                   <img src="images/5.jpg" />
               </div>
            </div>
            <div class="col">
               <div class="box">
                   <img src="images/1.jpg" />
               </div>
               <div class="box">
                   <img src="images/4.jpg" />
               </div>
               <div class="box">
                   <img src="images/6.jpg" />
               </div>
            </div>
            <div class="col">
               <div class="box">
                   <img src="images/2.jpg" />
               </div>
               <div class="box">
                   <img src="images/0.jpg" />
               </div>
            </div>
            <div class="col">
               <div class="box">
                   <img src="images/3.jpg" />
               </div>
               <div class="box">
                   <img src="images/8.jpg" />
               </div>
               <div class="box">
                   <img src="images/9.jpg" />
               </div>
            </div>
        </div>
   </body>

</html>