介绍一款可以滚动加载的插件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>

　　

posted @ 2017-02-08 16:40  刘浩2561179983  阅读(197)  评论(0)  编辑  收藏  举报