<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">

    <link href="dropload-gh-pages/dist/dropload.css" rel="stylesheet">

    <script src="dropload-gh-pages/examples/js/jquery.min.js"></script>

    <script src="dropload-gh-pages/dist/dropload.min.js"></script>

    <title>Title</title>

</head>

<body>

<div class="content">

    <div class="lists"></div>

</div>

<script>

    $(function(){

        // 页数

        var page = 0;

        // 每页展示5个

        var size = 5;

        // dropload

        $('.content').dropload({

            scrollArea : window,

            loadDownFn : function(me){

                page++;

                // 拼接HTML

                var result = '';

                $.ajax({

                    type: 'GET',

                    url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,

                    dataType: 'json',

                    success: function(data){

                        var arrLen = data.length;

                        if(arrLen > 0){

                            for(var i=0; i<arrLen; i++){

                                result +=   '<a class="item opacity" href="'+data[i].link+'">'

                                        +'<img src="'+data[i].pic+'" alt="">'

                                        +'<h3>'+data[i].title+'</h3>'

                                        +'<span class="date">'+data[i].date+'</span>'

                                        +'</a>';

                            }

                            // 如果没有数据

                        }else{

                            // 锁定

                            me.lock();

                            // 无数据

                            me.noData();

                        }

                        // 为了测试，延迟1秒加载

                        setTimeout(function(){

                            // 插入数据到页面，放到最后面

                            $('.lists').append(result);

                            // 每次数据插入，必须重置

                            me.resetload();

                        },1000);

                    },

                    error: function(xhr, type){

                        alert('Ajax error!');

                        // 即使加载出错，也得重置

                        me.resetload();

                    }

                });

            }

        });

    });

</script>

</body>

</html>

　　

介绍一款移动端滚动加载的插件---dropload的更多相关文章

  1. 基于jquery鼠标或者移动端滚动加载数据

    基于jquery鼠标或者移动端滚动加载数据 var stop = true; // 防止重复请求数据 $(window).scroll(function () { totalheight = pars ...

  2. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)

    移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...

  3. vue2.0无限滚动加载数据插件

      做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...

  4. js滚动加载小插件

    本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 少废话直接上代码!!!粗暴,直接,干脆 0//lk-2017-05-04 1(function($, win) { ...

  5. 介绍一款可以滚动加载的插件droploader

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)[转]

    使用方法 引用css和js <link rel="stylesheet" href="../dist/dropload.min.css"> < ...

  7. antd图标库按需加载的插件实现

    前景概要 antd是阿里出品的一款基于antd的UI组件库,使用简单,功能丰富,被广泛应用在中台项目开发中,虽然也出现了彩蛋事故,但不能否认antd本身的优秀,而我们公司在实际工作中也大量使用antd ...

  8. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

  9. [转] Jquery滚动加载

    原文地址:http://hi.baidu.com/vipxiaofan/item/9eb927b795671f77254b0985 另外一个asp.net的例子:http://blog.csdn.ne ...

随机推荐

  1. 01_1_Socket实现

    01_1_Socket实现 1.什么是MIME Multipurpos Internet Mail Extension 指明白传送内容的格式 最早用于邮件附件 2.HTTP协议基础 HTTP(Hype ...

  2. iOSAES加密的实现

    +(NSData *)AES256ParmEncryptWithKey:(NSString *)key Encrypttext:(NSData *)text  //加密 { char keyPtr[k ...

  3. C# 使用Epplus导出Excel [5]：样式

    C# 使用Epplus导出Excel [1]:导出固定列数据 C# 使用Epplus导出Excel [2]:导出动态列数据 C# 使用Epplus导出Excel [3]:合并列连续相同数据 C# 使用 ...

  4. XML 转 fastJSON

      import java.util.List; import org.dom4j.Attribute; import org.dom4j.Document; import org.dom4j.Doc ...

  5. Docker系列一：Docker的介绍和安装

    Docker介绍 Docker是指容器化技术,用于支持创建和实验Linux Container.借助Docker,你可以将容器当做重量轻.模块化的虚拟机来使用,同时,你还将获得高度的灵活性,从而实现对 ...

  6. 使用kickstart + pxe 部署无人值守安装

    1.作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装. 常规的安装系统方法: 光盘安装系统:一个服务器DVD内置光驱百 ...

  7. strace用法

    strace   --  trace system calls and signals     strace是Linux环境下的一款程序调试工具,用来监察一个应用程序所使用的系统调用及它所接收的系统信 ...

  8. day22-python之模块

    1.os import os # print(os.getcwd()) # os.chdir("..") # print(os.getcwd()) # os.makedirs('d ...

  9. win7 命令提示符怎么以管理员方式打开

    点击屏幕最左下角的"开始"按钮,选择"运行"命令: 在弹出的"运行"对话框中输入"CMD"命令,再单击"确定& ...

  10. Mysql显示所有数据库

    show databases; mysql> show databases; +--------------------+ | Database | +--------------------+ ...