js结合jquery实现的ajax瀑布流加载实例

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hj960511/article/details/55504959

一.js代码
ajax函数

//瀑布流数据
var getData = function (i,url,name){
    $.post(url,{p:i},function(data){
        if(data.status){
            if(data.list !==null) {
                $(name).before(data.list), $(name).val(data.page);
            }
        }else{
            alert(data.info);
        }
    });
}

前台代码

$(document).ready(function (){
        var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
        var nScrollTop = 0;   //滚动到的当前位置
        var nDivHight = $("#masonry").height();//获取单个div元素的滚动条 这里如果需要获取窗口的滚动条的话，修改获取的滚动高度即可。

        $("#masonry").scroll(function(){
            nScrollHight = $(this)[0].scrollHeight;
            nScrollTop = $(this)[0].scrollTop;
            if(nScrollTop + nDivHight >= nScrollHight){
                var page = $("#masonry_page").val();
                getData(page,"/masonry/id/2","#masonry_page");
            }
        });
    });

html代码

<div id="masonry">
 <input type="hidden" id="masonry_page" value="1">
</div>

注释：后台代码自行书写吧，类似分页的实现方式比较简单，后台输出html的代码，前台直接接受并添加（json数据）。

分享：在这里博主给大家推荐一个账号管理工具了，如果有朋友账号太多，经常忘记密码，而且密码太过复杂记不住，那么你有福了。在这里给大家推荐一个网站 51PassWord，博主也在用，希望能够帮助到大家。