情况是当滑动条滑动到最底部的时候，数据显示出一部分的更多

思路：获取到浏览器屏幕的高度client，文档的高度h和滑动距离顶部的距离scroll，当h<=client+scroll的时候就是滑动条到了底部的时候了，

判断好什么时候到了底部的时候，调取ajax获取到相对应的数据；

代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style>

        *{margin:0px;padding:0px;}

        .content{width:500px;height:100%;border:1px solid red;margin:10px auto 0px;}

        </style>

    </head>

    <body>

    <div class="content"></div>

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

    <script>

    $(function(){

        //一开始显示数据

        //实际中应该是将分页的效果做成加载更多的效果 但是调取数据的原理 是一样的 就是显示数据的效果不一样

        ajax();

        $(document).scroll(function(){

            //滚动条滑动的时候获取滚动条距离顶部的距离

            var scroll=$(document).scrollTop();

            //屏幕的高度

            var client=$(window).height();

            var h=$(document).height();

            var flag=true;

            if (h<=scroll+client) { // 到达底部时,加载新内容

                if(flag==false){

                    return;

                }

                ajax();

            }

        });

        function ajax(){

            $.ajax({

                url:'https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word,obdata&word=新闻',

                type:'GET',

                dataType:'jsonp',

                success:function(data){

                    flag=false;

                    setTimeout(function(){//只是模拟一下需要有个时间过程表示正在调取数据

                        for(var i=0;i<data.result.length;i++){

                            var result=data.result[i];

                            var odiv='<span style="font-size:35px;margin:10px;line-height:50px;">'+result.word+'</span></br>'+

                                    '<span style="font-size:35px;margin:10px;line-height:50px;">'+result.word+'</span></br>';

                            $(".content").append(odiv);

                        }

                    },500);

                },

            });

        };

    });

    </script>

    </body>

</html>

代码地址：https://github.com/GainLoss/load-more

因为加载更多的效果其实作用和分页是一样的 分页的地址：http://www.cnblogs.com/GainLoss/p/5810112.html

jquery实现加载更多效果的更多相关文章

  1. JS实现点击加载更多效果

    适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊)   点击加载更多效果:         第一个和第二个参数分别是btn和ul的DOM(必填)     ...

  2. jQuery自动加载更多程序

    1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由 ...

  3. JS 判断滚动底部并加载更多效果。。。。。。。。。

    JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...

  4. jQuery自动加载更多程序（转）

    jQuery自动加载更多程序   1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据 ...

  5. apiCloud实现加载更多效果，基本完美~

    apiCloud实现加载更多效果 1.接口支持,加入参数page. $page = $this->_request('page','trim','1'); $pagesize = 10; // ...

  6. ajax 下拉加载更多效果

    1.生成HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. jQuery实现加载中效果,防止重复提交

    //导出表格加载中的提示var dian=0;//控制'●'的个数var t=null;//停止时使用function id_loadspot(loadspotSpan,loadingDiv,expo ...

  8. 基于jQuery实现点击列表加载更多效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>   < ...

  9. jQuery 显示加载更多(节流) 实现预加载

    (function () { var showMoreNChildren = function ($children, n) { //显示某jquery元素下的前n个隐藏的子元素 var $hidde ...

随机推荐

  1. 【Python之os模块】使用

    目录 1. os.path 2. os.work   主要介绍在平时遇到的os模块的使用方法: 1. os.path 1.1 os.path.sep # 系统路径分隔符 # ============= ...

  2. 《OD面试》Java软件工程师

    一.JVM自动内存管理机制 1. Java内存模型 1.1 由所有线程共享的数据区: 1.1.1 方法区(Method Area), Non-Heap(非堆) 用户存储已被虚拟机加载的类信息.常量.静 ...

  3. 洛谷P2534 [AHOI2012]铁盘整理

    P2534 [AHOI2012]铁盘整理 题目描述 输入输出格式 输入格式: 共两行.第一行为铁盘个数N(1<=N<=50),第二行为N个不同的正整数,分别为从上到下的铁盘的半径R.(1& ...

  4. 2017-10-3 清北刷题冲刺班a.m

    P99zhx a [问题描述]你是能看到第一题的 friends 呢.——hja怎么快速记单词呢?也许把单词分类再记单词是个不错的选择.何大爷给出了一种分单词的方法,何大爷认为两个单词是同一类的当这两 ...

  5. 2017-10-1 清北刷题冲刺班a.m

    位运算1 (bit) Time Limit:1000ms   Memory Limit:128MB 题目描述 LYK拥有一个十进制的数N.它赋予了N一个新的意义:将N每一位都拆开来后再加起来就是N所拥 ...

  6. [转] ios打包IPA的各种问题和解决方法

    最近做了一个东西,在打包ipa文件时遇到了各种问题,纠结了我好几天. 由于我一直是做android的,在打包时以为ios打包也和android一样:用IDE(eclipse)生成一个签名证书,然后打包 ...

  7. 60个DevOps开源工具，你在用哪些？

    你喜欢免费的东西吗?获得开发者社区支持的自动化,开源的工具是大家梦寐以求的.这里列举了 60 多款最棒的开源工具,可以帮助你很好的实行 DevOps. 一.开发工具 版本控制&协作开发 1.版 ...

  8. 基于ECharts的股票行情分时、K线、MACD、DIF、DEA图表 (绝无仅有)

    先上效果图 源码和使用说明已经开源至GitHub,欢迎各位能提出宝贵的意见噢 https://github.com/2557606319/H5-Kline

  9. CF987C Three displays 解题报告

    题目传送门 题目大意 n个位置,每个位置有两个属性s,c,要求选择3个位置i,j,k,使得s_i<s_j<s_k​,并使得c_i+c_j+c_k最小 方法1 n³枚举每一种情况(也许可以拿 ...

  10. php路径问题

    ./ 是在当前目录开始寻找文件/ 是在下一级目录开始寻找文件 ../ 这个是在上一级目录开始寻找文件 $_SERVER['DOCUMENT_ROOT']获取站点根目录 __FILE__获取当前文件的完 ...