关于页面的瀑布流效果

瀑布流效果

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