<!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. 遍历Map的两种方式

    取出map集合中所有元素的方式一:keySet()方法. 可以将map集合中的键都取出存放到set集合中.对set集合进行迭代.迭代完成,再通过get方法对获取到的键进行值的获取. Set keySe ...

  2. iOS9适配总结

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

  3. Docker 镜像&仓库 获取及推送镜像

    docker查看.删除镜像 docker镜像存储位置: /var/lib/docker 查看docker信息也可以查看保存位置 docker info 1.列出镜像 docker images -aa ...

  4. MYSQL不能显示中文字，显示错误“ERROR 1366 (HY000): Incorrect string value: '\xE5\xBC\xA0\xE4\xB8\x89'”

    或者建表时带上编码utf8 CREATE TABLE `students`( `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY, `name` VARCHAR( ...

  5. Python学习笔记： 闭包

    闭包的基本定义 在计算机科学中,闭包(英语:Closure),又称词法闭包(Lexical Closure)或函数闭包(function closures),是引用了自由变量的函数.这个被引用的自由变 ...

  6. hdu-1338 game predictions（贪心题）

    Suppose there are M people, including you, playing a special card game. At the beginning, each playe ...

  7. UVA1589——xiangqi

    开始碰到这个题时觉得太麻烦了直接跳过没做,现在放假了再次看这个题发现没有想象中那么麻烦,主要是题目理解要透彻,基本思路就是用结构体数组存下红方棋子,让黑将军每次移动一下,看移动后是否有一个红方棋子可以 ...

  8. Linux下查看USB设备信息

    首先需要将usbfs挂载一下,然后才能查看.$ mount -t usbfs none /proc/bus/usb$ cat  /proc/bus/usb/devices或者在文件(/etc/fsta ...

  9. Python属性描述符（二）

    Python存取属性的方式特别不对等,通过实例读取属性时,通常返回的是实例中定义的属性,但如果实例未曾定义过该属性,就会获取类属性,而为实例的属性赋值时,通常会在实例中创建属性,而不会影响到类本身.这 ...

  10. [转] Vuex入门（2）—— state,mapState,...mapState对象展开符详解

    1.state  state是什么? 定义:state(vuex) ≍ data (vue) vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载 ...