关于页面的瀑布流效果

<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格式的数据即可

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值