zoukankan      html  css  js  c++  java
  • 介绍一款可以滚动加载的插件droploader

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

      

    请爱好前端技术的朋友,联系我,有问题大家一起讨论
  • 相关阅读:
    WebStorm 使用
    Mac上因磁盘格式导致gulp无限刷新问题
    JS数组随机排序
    Javascript高性能动画与页面渲染
    两列布局,左边固定,右边自适应的三种方法
    google pay app权限使用说明
    javaFX
    https网站引用http路径的js和css失效解决办法
    tomcat笔记
    java sigar.jar
  • 原文地址:https://www.cnblogs.com/liuhao-web/p/6378887.html
Copyright © 2011-2022 走看看