html页面瀑布流加载效果--优化了一下 [PHP相关]

作者:局魔深 发布于:2016-08-24 浏览:849次 收藏

<div class="content">
    
</div>


关键的滚动控制:

init();

function init(){
    currentPage = 1;
    totalPage = 0;
    finished = false;
    getData();
}

/**
 * @desc 设置滚动
 */
var windowHeight = $(window).height();
var scrollHandler = function () {
    var pageHeight = $(document.body).height();
    var scrollTop = $(window).scrollTop();
    var scale = (pageHeight - windowHeight - scrollTop) / windowHeight;
    if(scale < 0.003 && scale >0) {
        getData();
    }
};
$(window).scroll(scrollHandler);

/**
 * @desc 获取并处理ajax数据
 */
function getData(){
    if(finished){
        console.log('data receive finished!');
        return false;
    }
    $.ajax({
        url: "__URL__/getBorrowInData",
        type: "post",
        data: {"status": key, page: currentPage},
        dataType: "json",
        beforeSend: function(){
            layer.ready(function() {
                layer.load(3);
            })
        },
        success:function(data) {
            setTimeout(function(){
                layer.closeAll();
                totalPage = data.totalPage;
                if(currentPage >= totalPage){
                    finished = true;
                }
                currentPage++;
                var dataString = renderHtml(data.data, key);
                $('#content').append(dataString);
            }, 500)

        }
    });
}

/**
 * @desc 拼接结果集字符串
 * @param jsonData
 * @returns {string}
 */
function renderHtml(jsonData){
    var string = '';
    if(jsonData.length < 1){
        return '<div class="tips"><img src="__ROOT__/NewStyle/newmobile/img/index/19.png" alt=""></div><p class="tipp">暂无记录</p>';
    }
    for(var n = 0; n < jsonData.length; n++){
        string += '<li>';
        string      += '<span>';
        string          += '<input type="checkbox" name="cj" class="active" checked="true">';
        string      += '</span>';
        string      += '<span>'+jsonData[n].user_name+'</span>';
        string      += '<span>'+jsonData[n].investor_capital+'</span>';
        string += '</li>';
    }
    return string;
}

//关于后台的代码就暂时不写了   大致就是接收页面传的页码 进行查询  返回json格式的数据即可


如果文章对您有所帮助,希望继续支持我们,您的支持是我们最大的动力 ¥打赏
声明:文章内容由作者原创或整理,未经允许,不得转载!
  • 评论于 2016-12-17 11:23:44

    123

    回复
您需要登录后才可以评论。登录 | 立即注册