AJAX实现瀑布流触发分页与分页触发瀑布流的方法


Posted in Javascript onMay 23, 2016

所谓的瀑布流效果就正如轻图床首页效果那样,多个内容相近的栏目紧密排列,尽量使到栏目间的间隙最小(即流体布局),并且随着页面滚动条向下滚动,新的数据会追加至当前页面的尾部直到所有数据加载完毕(滚动触发的 Ajax 翻页)。

瀑布流触发分页

这里说一下思路,虽然下面的实例中不能全都用到:
1.当进入屏幕时,判断内容是否为空,如果不为空,开始初始化数据。
2.当往屏幕下拉时,判断数据的最底部与屏幕高度+滚动的高度的大小。如果最底部小于上面两者之和,重新请求接口,即加载数据。
3.当遇到数据超过某个页数时,停止加载或者用分页的形式显示,点击再显示内容。

var intf_url="http://3water.com/intf";
var pathUrl = "http://3water.com/";
var page=1;
var isLoadRB=false; 
var ul_select=$("#fansList");
var btn_more=$("#loading");
if(ul_select.length <1) return ;
var is_more =true;
//跨域请求接口
function loadjs(src,callback){
 var js= document.createElement('script');
 js.src = src;
 js.onreadystatechange = js.onload =function(){
 if(!js.readyState || js.readyState=='loaded'
  || js.readyState=='complete'){
  if(callback){callback()||callback};
 }
};
js.charset="utf-8";
document.getElementsByTagName('head')[0].appendChild(js);
}
//回调函数
function fill(data){
if(data.pageCount==data.pageNo){
 is_more=false;//如果数据全部加载完毕,取消加载
    $("#loading").html("加载完毕");
}
}
//解析接口
function queryIntf(){
var url=page==1?intf_url+".json":intf_url+"_page"+page+".json";
loadJs(url,callback);
}
function callback(){
page++;
}
/*判断是否要加载接口*/
function needtoloadRB(){
 var btn_top=btn_more.offset().top;
 var window_height=$(window).height();
 var scroll_Top=$(window).scrollTop();
 return btn_top<scroll_Top+window_height?true:false;
}
$(window).scroll(function(){
 var _needload=needtoloadRB();
 if(_needload && isLoadRB==false &&is_more){isLoadRB=true;queryintf();}
})
window.onload = function(){
 queryintf(); 
}

以上就是比较简单的随着下拉内容不断加载的思路代码。

JSON格式类似于(如果是动态接口,可以通过callback函数,则这里不用加fill()):

fill({"fans":[{"nickname":"蔡宝坚","website":"3water.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"3water.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"3water.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"3water.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"3water.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"3water.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"3water.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"3water.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"3water.com","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"3water.com","youzhi":"2.5","time":"3分钟前"}],"pageCount":2,"pageNo":1,"pageSize":10,"totalSize":20
});

原来静态也可以做接口回调。通过静态处理,则大大缓解了服务器压力和加速生成内容,是大流量网站必备的处理方式。

jQuery的ajax方法实现分页触发瀑布流

1.通过 Ajax 的方式获取下一页的内容
我们需要网页中具有如下 HTML 结构的导航, next_link 为下一页的 url。

<div id="page_nav">
  <a href="next_link">下一页</a>
</div>

相应的 css

#page_nav {clear: both; text-align: center; }

以下这段代码为通过 Ajax 的方式获取下一页的内容,并追加到当前内容的末尾。

nextHref = $("#next_page a").attr("href");
// 给浏览器窗口绑定 scroll 事件
$(window).bind("scroll",function(){
  // 判断窗口的滚动条是否接近页面底部
  if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) {
    // 判断下一页链接是否为空
    if( nextHref != undefined ) {
      // Ajax 翻页
      $.ajax( {
        url: $("#page_nav a").attr("href"),
        type: "POST",
        success: function(data) {
          result = $(data).find("#thumbs .imgbox");
          nextHref = $(data).find("#page_nav a").attr("href");
          $("#page_nav a").attr("href", nextHref);
          $("#thumbs").append(result);
        }
      });
    } else {
      $("#page_nav").remove();
    }
  }
});

2.对追加的内容进行流体布局
熟悉 jQuery 的童鞋应该会了解 js 对于通过 Ajax 方式插入到页面中的元素并不起作用,但在这里并不需要作出如使用 live() 等处理,因为 Masonry 已经在内部作出类似的处理并且默认起效,因此只需在 Ajax 成功执行后的回调函数中调用 masonry() 方法即可。

$newElems = $result;
$newElems.imagesLoaded(function(){
  $container.masonry( 'appended', $newElems, true );
});

3.对 Ajax 翻页过程作出修饰
在上面的过程中已经有完整的瀑布流布局,但是翻页过程中并没有任何提示,而且直接插入多张图片可能会影响用户体验,因此需要对翻页过程作出一些修饰,下面给出完整代码。
这里需要增加一个如下的元素,用于提示正在加载新内容或提示已到了最后一页。

<div id="page_loading">
  <span>给力加载中……</span>
</div>

相应的 css

#page_loading {display: none; background: #111111; opacity: 0.7; height: 60px; width: 220px;  padding: 10px; position: absolute; bottom: -50px; left: 330px; }

下面是完整的 Ajax 翻页代码
nextHref = $("#next_page a").attr("href");
// 给浏览器窗口绑定 scroll 事件
$(window).bind("scroll",function(){
  // 判断窗口的滚动条是否接近页面底部
  if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) {
    // 判断下一页链接是否为空
    if( nextHref != undefined ) {
      // 显示正在加载模块
      $("#page_loading").show("slow");
      // Ajax 翻页
      $.ajax( {
        url: $("#page_nav a").attr("href"),
        type: "POST",
        success: function(data) {
          result = $(data).find("#thumbs .imgbox");
          nextHref = $(data).find("#page_nav a").attr("href");
          $("#page_nav a").attr("href", nextHref);
          $("#thumbs").append(result);
          // 把新的内容设置为透明
          $newElems = result.css({ opacity: 0 });
          $newElems.imagesLoaded(function(){
            $container.masonry( 'appended', $newElems, true );
            // 渐显新的内容
            $newElems.animate({ opacity: 1 });
            // 隐藏正在加载模块
            $("#page_loading").hide("slow");              
          });
 
        }
      });
    } else {
      $("#page_loading span").text("木有了噢,最后一页了!");
      $("#page_loading").show("fast");
      setTimeout("$('#page_loading').hide()",1000);
      setTimeout("$('#page_loading').remove()",1100);
    }
  }
});
Javascript 相关文章推荐
基于jQuery的前端数据通用验证库
Aug 08 Javascript
判断输入是否为空,获得输入类型的JS代码
Oct 30 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
学习Angularjs分页指令
Jul 01 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
Angular8 简单表单验证的实现示例
Jun 03 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
jQuery Mobile中的button按钮组件基础使用教程
May 23 #Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 #Javascript
jQuery插件formValidator实现表单验证
May 23 #Javascript
超链接怎么正确调用javascript函数
May 23 #Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 #Javascript
jQuery中选择器的基础使用教程
May 23 #Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 #Javascript
You might like
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
关于递归运算的顺序测试代码
2011/11/30 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
移动端图片上传旋转、压缩问题的方法
2018/10/16 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
理理Vue细节(推荐)
2019/04/16 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
js实现无缝轮播图
2020/03/09 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
python序列类型种类详解
2020/02/26 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
教师竞聘演讲稿
2014/05/16 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
销售顾问工作计划书
2014/09/15 职场文书
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
公司宣传语大全
2015/07/13 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
Redis全局ID生成器的实现
2022/06/05 Redis