<!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. java设计模式3--观察者模式

    1.初步认识 观察者模式的定义: 在对象之间定义了一对多的依赖,这样一来,当一个对象改变状态,依赖它的对象会收到通知并自动更新. 大白话: 其实就是发布订阅模式,发布者发布信息,订阅者获取信息,订阅了 ...

  2. vue.js 一（基础环境搭建）

    之前由于看了React的东西,写了两篇React的脚手架搭建,一是给自己记一点可用的东西,免得每次都去找,毕竟搭建环境在项目相对固定的时期不是经常要干的事情,一段时间不用就会忘记了. 前端的js框架还 ...

  3. 动态规划：HDU1248-钱币兑换问题

    解题心得: (青蛙跳台阶:有n阶台阶,青蛙可以一次跳一阶也可以一次跳两阶,问总共有多好中跳法) 1.之前把这个问题的思路弄错了,以为是递推,就像青蛙跳台阶,用斐波那契求解.但是用斐波那契肯定会超范围. ...

  4. poj 3273 分期问题 最大化最小值

    题意:将N个账款分给城M个财务期,使得每个分期账款和的值最大? 思路: 每次mid为分期账款 如果分期次数小于m说明mid太大,减上限  反正 增下限 开始下限设为 最大值 上限设为和 解决问题的代码 ...

  5. 信号量和互斥量C语言示例理解线程同步

    Table of Contents 1. 线程同步 1.1. 用信号量进行同步 1.2. 用互斥量进行同步 2. 参考资料 线程同步 了解线程信号量的基础知识,对深入理解python的线程会大有帮助. ...

  6. RxJava Rxandroid retrofit

    其实Retrofit会了.集合RxJava,RxAndroid 就很简单了. 只需要改几个地方. 1.接口里面返回的对象不再是 call,而是Observable public interface A ...

  7. 【ELK】ELK安装与配置

    一.ELK体系结构 二.系统环境变量 [主机信息] IP 主机名 操作系统版本 10.10.10.102 console CentOS7.5 10.10.10.103 log1 CentOS7.510 ...

  8. 成为Java高手的25个学习要点

    成为Java高手的25个学习要点 想成为Java大牛吗?不妨来学习这25个要点. 1. 你需要精通面向对象分析与设计(OOA/OOD).涉及模式(GOF,J2EEDP)以及综合模式.你应该了解UML, ...

  9. Python对文本文件的简单操作（一）

    工作背景 性能测试工程师,主要测试工具--loadrunner,主要是接口测试. 实现功能 loadrunner对报文格式的转换存在问题,部分报文无法转换,故使用Python编写脚本自动将soap协议 ...

  10. Python+Selenium中级篇之-封装一个自己的类-浏览器引擎类

    前一篇文章我们知道了,如何去封装几个简单的Selenium方法到我们自定义的类,这次我们编写一个类,叫浏览器引擎类,通过更改一个字符串的值,利用if语句去判断和控制启动那个浏览器.这里我们暂时,支持三 ...