html页面瀑布流加载效果 [PHP相关]

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

//需要clone 的div元素

<div class="content">
    <div style="display:none" id="demo"></div>
</div>

关键的滚动控制:

$(window).scroll(function(){
    //如果正在请求  返回函数
     if(isLoading) return;
     //获取滚动高度
     var sT = $(window).scrollTop();
     //获取窗口的高度
     var wH = $(window).height();
     //整个文档的高度
     var sH = $(document).height();
     //当距离底部不超过200px时加载下一页
     if(sH - sT - wH <= 200 ){
         isLoading = true;
         $('#core_loading').show();
         load();
      }
})
var page = 1;//首先加载第一页
var isLoading = false;
function load(){
    $.ajax({
        type: 'POST',
        url: 'url'+'?page='+page,
        data:{data: data},
        dataType: 'json',
        success: function(data){
            for (var i = 0; i < data.length; i++) {
                var newDemo = $("#demo").clone(true);
                newDemo.html(data[i].content);
                newDemo.show();
                $('.content').append(newDemo);
            };
            page++;
            isLoading = false;
            $('#core_loading').hide();
        },
    
        error: function(){
            isLoading = false;
        }
    
    })
}


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

最后总结一下 其实这个效果最主要的就是滚动距离的判断  其次的大致就相当于用ajax来进行分页了

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

    123

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