<!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. 03_2_JAVA中的面向对象与内存解析

    03_2_JAVA中的面向对象与内存解析 1. 成员变量 成员变量可以是Java语言中任何一种数据类型(包括基本数据类型和引用数据类型) 在定义成员变量时可以对其初始化,如果不对其初始化,Java使用 ...

  2. cocos2dx lua 吞噬层的触摸事件

    首先要创建一个layer,设置该层为可触摸 layer:setTouchEnabled(true) 注册触摸事件 local listener = cc.EventListenerTouchOneBy ...

  3. iOS9适配总结

    每年iOS升级,都会带来一些坑,这次iOS9也不例外.本文总结了微信在适配iOS9上遇到的问题和解决方案. 一.iOS9问题汇总   1. 编译问题(Bitcode) 大部分人升级到Xcode7后,首 ...

  4. 重装vs2008遇到的问题

    由于前几天办公室电脑dhcp服务挂了,wifi网线都上不了网,很无奈只能重装了系统.于是VS2008也要重装,之前一直用的都是前一个同事留下来的软件,没自己装过,自己装的时候踩了坑,记录一下. 重装了 ...

  5. NOIP模拟赛 经营与开发 小奇挖矿

    [题目描述] 4X概念体系,是指在PC战略游戏中一种相当普及和成熟的系统概念,得名自4个同样以“EX”为开头的英语单词. eXplore(探索) eXpand(拓张与发展) eXploit(经营与开发 ...

  6. 【前端_js】JavaScript知识点总结

    1.JavaScript的定义及特性 1.1.定义 javascript是运行在客户端的一种直译式脚本语言(程序在运行过程中逐行进行解释),它的解释器被称为JavaScript引擎,为浏览器的一部分. ...

  7. nginx静态资源web服务

    静态资源:非服务器动态运行生成的文件 浏览器端渲染:html ,css,js 图片:jpeg,gif,png 视频:flv ,mpeg 文件:txt,等任意下载文件 静态资源服务场景:CDN 文件读取 ...

  8. poj 3190 奶牛挤奶问题 贪心算法

    题意:奶牛挤奶问题,每只奶牛在[a,b]的时间内挤奶,要求挤奶的过程中不能不打扰,且只能自己一个人独享挤奶的机器.问最少需要多少个挤奶的机器? 思路: 对奶牛挤奶开始的时间从小到大开始排序. 将正在工 ...

  9. 记一次虚拟机无法挂载volume的怪异问题排查

    故障现象 使用nova volume-attach <server> <volume>命令挂载卷,命令没有返回错误,但是查看虚拟机状态,卷并没有挂载上. 故障原因 疑似虚拟机长 ...

  10. 使用mysql监视器即命令行下的mysql

    命令行下登录mysql 首先必须在alias下有设置mysql, 我的mysql安装的位置在/usr/local/mysql 于是做了一个别名: alias mysql='/usr/local/mys ...