jq滚动到底部自动加载数据实例

最新推荐文章于 2020-12-30 16:23:36 发布
最新推荐文章于 2020-12-30 16:23:36 发布
阅读量1.6k 收藏
点赞数 1
<!DOCTYPE HTML>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" name="viewport"/>  
<title>JQ滚动到底部自动加载</title>  
  
<style>  
        html,body,ul,li{margin:0;padding:0;border:0;vertical-align:baseline;}  
        body,html{line-height:1;font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif;font-size:16px;color:#333;}  
        ol,ul{list-style:none;}  
        a{text-decoration:none;}  
        body{background:#f2f2f2;}  
        .prolist li{height:50px;line-height:50px;border-bottom:1px solid #f8f8f8;background:#fff;padding:0 15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}  
        .prolist li a{color:#333;font-size:16px;}  
          
        /**加载效果旋转**/  
        @-webkit-keyframes rotate {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}  
        @keyframes rotate {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}  
          
        .loadmore {display:block;line-height: 50px;text-align:center;color:#ccc;font-size:14px;}  
        .loadmore span{height:20px;width:20px;border-radius:100%;display:inline-block;margin:10px;border:2px solid #f60;border-bottom-color: transparent;vertical-align: middle;-webkit-animation: rotate 1.1s infinite linear;animation: rotate 1.1s infinite linear;}  
        .loadover{position:relative;margin:0 12px;padding:24px 0;height:20px;line-height:20px;color:#909090;text-align: center;}  
        .loadover span{position:relative;display:inline-block;padding:0 6px;height:20px;background:#F2F2F2;z-index:2}  
        .loadover:after {content:''position: absolute;left: 0;top:50%;width: 100%;height:1px;background:#DCDCDC;z-index:1;display:block;}  
    </style>  

</head>  

<!-- 产品列表 开始-->  
<ul class="prolist">  
    <li>好经典人生语句，经典得让人心痛！</li>  
    <li>好经典人生语句，经典得让人心痛！</li>

    <li>好经典人生语句，经典得让人心痛！</li>  

    <li>好经典人生语句，经典得让人心痛！</li>

    <li>好经典人生语句，经典得让人心痛！</li>  
    <li>好经典人生语句，经典得让人心痛！</li>

</ul>  
<!-- 产品列表 结束 --> 

<script src="jquery.js"></script>

<script>

   var page=1;

   var finished=0;

   var sover=0;

   //如果未满一屏，自动补全一屏

   var setdefult=setInterval(function (){  
    if(sover==1)  
        clearInterval(setdefult);     
    else if($(".prolist").height()<$(window).height())  
        loadmore($(window));  
    else  
        clearInterval(setdefult);  
},500);  

//加载完

function loadover(){  
if(sover==1){     
   var overtext="亲～没有更多内容了";  
   $(".loadmore").remove();  
       if($(".loadover").length>0)  
     {  
        $(".loadover span").eq(0).html(overtext);  
      }  
else  
     {  
       var txt='<div class="loadover"><span>'+overtext+'</span></div>'  
       $("body").append(txt);  
      }  
   }  
} 

//加载更多  
var vid=0;  
function loadmore(obj){  
    if(finished==0 && sover==0){  
         var scrollTop = $(obj).scrollTop();  
         var scrollHeight = $(document).height();  
 var windowHeight = $(obj).height();  
         
 if($(".loadmore").length==0){  
     var txt='<div class="loadmore"><span class="loading"></span>加载中..</div>'  
     $("body").append(txt);  
}  
 if (scrollTop + windowHeight -scrollHeight<=100 ) {  
//此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作  
//防止未加载完再次执行  
        finished=1;  
var result = "";  
for(var i = 0; i < 8; i++){  
vid++;  
result+='<a>'+'<i>'+'5'+'</i>'+'<span>'+'北京市海淀区中关村第一小                                           学'+'</span>'+'<span>'+'1018'+'</span>'+'</a>'   
        }  
setTimeout(function(){  
   //$(".loadmore").remove();  
$('.container').append(result);  
     page+=1;  
     finished=0;  
     //最后一页  
     if(page==10){  
          sover=1;  
          loadover();  
      }  
 },1500);  
/*$.ajax({  
type: 'GET',  
url: 'json/more.json?t=25&page='+page,  
dataType: 'json',  
success: function(data){  
   if(data==""){  
      sover = 1;  
      loadover();                       
      if (page == 1) {  
           $("#no_msg").removeClass("hidden");  
           $(".loadover").remove();  
      }  
   }  
   else{  
     var result = ''  
     for(var i = 0; i < data.lists.length; i++){  
          result+='<a>'+'<i>'+'5'+'</i>'+'<span>'+'北京市海淀区中关村第一小                                    学'+'</span>'+'<span>'+'1018'+'</span>'+'</a>'  
  }  
                          
  setTimeout(function(){  
      $(".loadmore").remove();  
      $('.container').append(result);  
           page+=1;  
           finished=0;  
           //最后一页  
           if(page==10){  
               sover=1;  
               loadover();  
           }  
        },1500);  
  }  
       },  
error: function(xhr, type){  
  alert('Ajax error!');  
}  
});
      }  
    }  
  }  
 //页面滚动执行事件  
    $(window).scroll(function (){  
loadmore($(this));  
    });   

</script>

小辉鲜森
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现当拉动滚动条到底部加载数据
wuyou1336的博客
02-20 4446
当用户滚动元素中到一个不同的地方时，scroll事件将发送到这个元素。它适用于window对象，但也可滚动框架与CSS overflow 属性设置为scroll的元素。 1、普通的div滚动到底部加载更多的方法 内容 $('#test').scroll(function(event){ var top = $(this).scrollTop(); var height
jquery 滚动到底部时自动加载更多
12-21
jquery 滚动到底部时自动加载更多。简单思路仅供参考，不足之处请多包涵，相互学习共同进步。参考文章：http://blog.csdn.net/djk8888/article/details/53781452。我的腾讯微博：http://t.qq.com/djk8888
JQ处理页面滚动底部，加载数据！
qq_37899005的博客
09-30 234
$(window).scroll(function (){ loadmore($(this)); });
对于JQ实现网页翻页到底部自动加载的问题
热门推荐
GG
04-23 1万+
使用jquery/html 实现网页翻到底部自动加载的问题，可以给用户更好的使用体验，而且第一次加载速度会提高，因为只加载了一小部分吗~
jquery 实现滚动条下拉时无限加载的简单实例
11-22
这个实例的目标是当用户滚动到页面底部时，通过 JavaScript 异步请求新数据并将其动态添加到页面上。关键在于监听滚动事件，并判断是否已经到达页面底部。 在脚本中，定义了两个变量： 1. `lastId`：用来记录每次...
jquery滚动加载数据的方法
01-19
本文实例讲述了jquery滚动加载数据的方法。分享给大家供大家参考。具体分析如下： 我们浏览有些网页的时候，当拉动浏览器的滚动条时到页底时，页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载...
jQuery滑动到底部加载下一页数据的实例代码
10-19
在提供的代码片段中，`getData()`函数就是负责处理滚动到底部加载数据的逻辑。它通过递增`page_num`来获取下一页数据，并使用`insertDiv()`函数将数据转化为HTML并追加到`.er_list`类的元素中。同时，`beforeSend`和...
jQuery底部自动填充瀑布流特效代码
03-20
标题中的“jQuery底部自动填充”是指在用户滚动页面到底部时，动态加载更多内容以填充页面的瀑布流布局。这种技术被称为无限滚动或滚动加载，可以提升用户体验，减少页面加载时间，因为不是一次性加载所有内容，而是...
jquery实现跳到底部，回到顶部效果的简单实例(类似锚)
11-22
总的来说，这个简单的jQuery实例展示了如何利用JavaScript和jQuery库为网页添加实用的导航功能。通过点击按钮，用户可以轻松地跳转到页面顶部或底部，提供良好的用户体验。这种功能在内容丰富的网站和博客中尤其有用...
jQuery滚动到页面底部后数字从0开始滚动到指定数字文字特效代码
06-22
jQuery滚动到页面底部后数字从0开始滚动到指定数字文字特效代码,包括小数点实现滚动，都可以实现你想要的效果！
jq向下滑动刷新_jQuery手势控制，下拉刷新
weixin_31974757的博客
12-30 707
插件描述：手机APP开发中，下拉刷新是一个很常见的功能，但是在网页中，这种模式用的很少。网页下拉刷新，看似简单的功能，但我在网上并没有找到比较好的解决方法。自己开发了一个，期间遇到了各种小坑，浏览器兼容，各种浏览器下拉默认事件，PC端无触摸事件~。记录一下静态样式**html代码示例**1234其中container是触摸容器，loading-warp，是刷新提示容器，容器样式、id可以自定义，此...
JS jQuery 实现元素自动滚动到底部，兼容IE、FF、Chrome
whiteGay的博客
10-10 482
HTML代码： <ul class="tasklog-dialog-ul" id="auto_to_bottom"> <li>删除虚拟机快照成功</li> <li>删除虚拟机快照成功...
Jquery——页面加载时滚动条滚到最底端
shijiujiu33的博客
02-28 1321
$('#scrop').scrollTop( $('#scrop')[0].scrollHeight); #scrop是选择有滚动条的组件
js页面滚动到底部时自动加载下一页数据
gaoxu529的专栏
03-09 1万+
一段滚动到页面底部自动加载更多数据的js代码，需要jquery.js 、 jquey.tmpl.js 支持 var Data = { PageCount: 1, PageSize: 30, IsCompleted: false, init: function(rows) { //初始化，载入第一页数据 $(".list-item")
jqGrid 滚动加载 或者点击分页加载两种方式
ninuxGihub的博客
06-16 3958
分页的使用场景：当需要展示的字段太多，记录的条数太多的情况下，如果采用一次性加载全部的记录，会导致加载页面缓慢，响应速度慢， 影响系统的流程程度，故所以采用分页的方法加载数据是十分必要的 步骤如下： jqgrid 分页的原理其实是以post 或get方式向后台发送了请求，携带的几个参数都是固定了，例如page,rows,total,...等等 这些参数需要被后台的Co
jquery在浏览器滚动条上的应用
薄荷的Weblog
10-21 1467
Google阅读器上有一个AJAX效果很不错，就是阅读项目时不需要翻页，浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来，一直到所有项目加载完为止。对于我来说再好不过了，因为我很不喜欢翻页，尤其是输入页码再定位到页。要知道，数据量增加很频繁时，要通过定位页码来找到目标数据似乎并没有什么意义。我觉得用户体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据。至于浏览数据，尤其
jquery实现下拉快到底部时加载更多数据
cmf1994的博客
07-06 6610
实现原理：    获取浏览器高度  h = jQuery(window).height()    获取滚轮滚动高度  s = jQuery(window).scrollTop()    获取最页面总高度  documentH = jQuery(document).height()当滚轮滚到距离页面底部100px时开始加载下一页数据    (s+h+100) &gt;= documentH 开始加载...
jq table表格自动滚动
最新发布
10-08
在 jq 中，要实现表格自动滚动，可以使用一些 CSS 属性和 JavaScript 代码来实现。下面是一个示例代码，可以实现表格自动滚动效果： HTML 代码： ```html <!-- 表格内容 --> ``` CSS 代码： ```css #table-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值