scroll实现瀑布流原理，数据获取使用getJSON。

最新推荐文章于 2021-04-29 17:00:28 发布

houzqiang

最新推荐文章于 2021-04-29 17:00:28 发布

阅读量712

点赞数

本文链接：https://blog.csdn.net/houzqiang/article/details/14094635

版权

1，使用scroll事件触发事件。

2，通过$(window).scrollTop();$(document).height();$(window).height();获取页面元素值，相减获取页面距底部的值。

3，根据weNeed值，进行判断，然后调用getJSON方法，获取后台json值（php中，jsonencode只能处理utf8数据，这个需要注意），然后用each方法循环获取值，然后进行赋值。

4，通过flag控制方法执行次数，保证到底部后，getJSON方法在条件内执行一次。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title> New Document </title>
<meta http-equiv="content-type" content="text/html;charset=gbk" />
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="jquery-1.10.js"></script>
<style>
#monitor {//测试用
   position:fixed;
   top:10px;
   left:20px;
   z-index:999;
   }
</style>
<script>
   $(document).ready(function(){
       var flag=false;
       var i=1;
       $(window).scroll(function(){
           var sDistance=$(window).scrollTop();
           var dHeight=$(document).height();
           var wHeight=$(window).height();
           var toBottomDis=dHeight-sDistance;
           var weNeed=toBottomDis-wHeight;//底部某一数据显示时，触发高度值。
           //$("#monitor").html("1111111111111111111网页高度减去滚动的高度:"+toBottomDis+", 滚动了多少:"+sDistance+" 浏览器窗口高度:"+wHeight+"weNeed:"+weNeed+"dHeight"+dHeight);

           if(!flag&&weNeed<=160){
               flag=true;
               $.getJSON('http://www.getjson.com/index.php?i='+i,function(j){
                   if(j){
                       $.each(j,function(index,array){
                           var str = "<li><a href="+array['url']+">"+array['id']+"-"+array['title']+"<\/a><\/li>";
                           $("#showList").append(str);
                       });
                       i++;
                   }else{
                       $(".nodata").show().html("<hr>没有数据了！");
                       return false;
                   }
                   flag=false;
               });

           }
           if(!flag&&weNeed>160){
               flag=false;
           }

       });
   });
</script>
</head>

<body>
<div id="monitor" ></div><br><br>
   <ul id="showList">
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li><li>测试数据1</li>
       <li>测试数据1</li>
   </ul>
   <input type="button" id="showmore" value="显示更多">
   <div class="nodata"></div>
</body>
</html>

houzqiang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
scroll实现瀑布流原理，数据获取使用getJSON。

1，使用scroll事件触发事件。2，通过$(window).scrollTop();$(document).height();$(window).height();获取页面元素值，相减获取页面距底部的值。3，根据weNeed值，进行判断，然后调用getJSON方法，获取后台json值（php中，jsonencode只能处理utf8数据，这个需要注意），然后用each方法循环获取值，然后进
复制链接

扫一扫