下拉刷新，上拉加載使用插件dropload.js

HTML實例代碼

<div class="content">
    <div class="lists">
        <a class="item" href="#">
            <img src="./img/pic.jpg" alt="">
            <h3>hehe</h3>
            <span class="date"><?php echo $data->data[$i]->id; ?></span>
        </a>
    </div>
</div>

JS代碼

$(function(){
    // 頁數
    var page = 0;
    // 每頁展示10個
    var size = 10;

    // dropload
    $('.content').dropload({
        scrollArea : window,
        domUp : {
            domClass   : 'dropload-up',
            domRefresh : '<div class="dropload-refresh">↓下拉刷新-自定義內容</div>',
            domUpdate  : '<div class="dropload-update">↑釋放更新-自定義內容</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加載中-自定義內容...</div>'
        },
        domDown : {
            domClass   : 'dropload-down',
            domRefresh : '<div class="dropload-refresh">↑上拉加載更多-自定義內容</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加載中-自定義內容...</div>',
            domNoData  : '<div class="dropload-noData">暫無數據-自定義內容</div>'
        },
        loadUpFn : function(me){
            $.ajax({
                type: 'GET',
                url: 'json/update.json',
                dataType: 'json',
                success: function(data){
                    var result = '';
                    for(var i = 0; i < data.lists.length; i++){
                        result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'
                                        +'<img src="'+data.lists[i].pic+'" alt="">'
                                        +'<h3>'+data.lists[i].title+'</h3>'
                                        +'<span class="date">'+data.lists[i].date+'</span>'
                                    +'</a>';
                    }
                    // 爲了測試，延遲1秒加載
                    setTimeout(function(){
                        $('.lists').html(result);
                        // 每次數據加載完，必須重置
                        me.resetload();
                        // 重置頁數，重新獲取loadDownFn的數據
                        page = 0;
                        // 解鎖loadDownFn裏鎖定的情況
                        me.unlock();
                        me.noData(false);
                    },1000);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加載出錯，也得重置
                    me.resetload();
                }
            });
        },
        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();
                }
            });
        },
        threshold : 50
    });
});