关于页面的瀑布流效果

来源：互联网发布：人工智能项目编辑：程序博客网时间：2024/06/06 01:14

<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