<!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>

　　

介绍一款可以滚动加载的插件droploader的更多相关文章

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

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

  2. js滚动加载小插件

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

  3. 介绍一款移动端滚动加载的插件---dropload

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

  4. [转] Jquery滚动加载

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

  5. 简易数据分析 10 | Web Scraper 翻页——抓取「滚动加载」类型网页

    这是简易数据分析系列的第 10 篇文章. 友情提示:这一篇文章的内容较多,信息量比较大,希望大家学习的时候多看几遍. 我们在刷朋友圈刷微博的时候,总会强调一个『刷』字,因为看动态的时候,当把内容拉到屏 ...

  6. HTML5商城开发一 楼层滚动加载数据

    对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下 场景:HTML5,局部商品列表信息滚动(局部滚动条) 1.通过jq设置subCategoryScroll的高度为屏幕显示高度( ...

  7. js 滚动加载iframe框中内容

    var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest; //滚动加载 var scrollLoad =function( ...

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

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

  9. 记录WEUI中滚动加载的一个BUG

    最近写微信公众号,用到的技术栈是jq+vue的混合开发,采用的UI是移动端比较火的WEUI,在微信开发中应该较广泛.个人看惯了elementUI文档,相对于饿了么组件文档的详细,WEUI的文档还是比较 ...

随机推荐

  1. flock文件锁

    linux中的定时任务crontab会定时执行一些脚本,但是脚本的时间往往无法控制,当脚本的执行时间过长,可能会导致上一次任务的脚本还没执行完,下一次任务的脚本又开始执行的问题.这种情况下会出现一些并 ...

  2. hihocoder#1098 : 最小生成树二·Kruscal算法

    #1098 : 最小生成树二·Kruscal算法 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 随着小Hi拥有城市数目的增加,在之间所使用的Prim算法已经无法继续使用 ...

  3. 动态规划：HDU-1203-0-1背包问题：I NEED A OFFER!

    解题心得: 动态规划就是找到状态转移方程式,但是就本题0-1背包问题来说转移方程式很简单,几乎看模板就行了. 在本题来说WA了很多次,很郁闷,因为我记录v[i]的时候i是从0开始的,一些特殊数据就很尴 ...

  4. POJ 3370 Halloween treats(抽屉原理)

    Halloween treats Every year there is the same problem at Halloween: Each neighbour is only willing t ...

  5. Android 有些机型hint不显示

    这个问题就是有些手机型号,hint字体正好和你的背景色一样,不如你的背景色是白色, 因为大多数的系统,hint都是灰色,所以可以显示,有些手机他妈的就是hint默认字体是白色,结果显示不出来. 那么就 ...

  6. TCP/IP网络编程之I/O复用

    基于I/O复用的服务端 在前面章节的学习中,我们看到了当有新的客户端请求时,服务端进程会创建一个子进程,用于处理和客户端的连接和处理客户端的请求.这是一种并发处理客户端请求的方案,但并不是一个很好的方 ...

  7. IT帮2019年2月线下活动【定义工作，解读自我】之站桩练习

    2019年2月IT帮线下活动[定义工作,解读自我] 昨天的活动收获很大,全面的总结周老师会另写一篇来帮助大家回顾.我想说一下其中最打动我的一句话:“只有你能决定你有多优秀!” “工作中把自己当成企业家 ...

  8. jmeter快捷键

    快捷键 功能 备注 Ctrl + C 复制 可复制组件 Ctrl + V 粘贴 可粘贴组件 Ctrl + Shift + C 复制粘贴当前组件到下一行   Ctrl + R 运行测试计划   Ctrl ...

  9. 菜鸟之路——机器学习之Kmeans聚类个人理解及Python实现

    一些概念 相关系数:衡量两组数据相关性 决定系数:(R2值)大概意思就是这个回归方程能解释百分之多少的真实值. Kmeans聚类大致就是选择K个中心点.不断遍历更新中心点的位置.离哪个中心点近就属于哪 ...

  10. Zookeeper 增删改查

    初始化对象连接到zookeeper服务: public ZooKeeper initZk(){ final CountDownLatch countDownLatch = new CountDownL ...