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+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
3种js实现string的substring方法
Nov 09 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
JavaScript运行原理分析
Feb 09 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
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和ACCESS写聊天室(三)
2006/10/09 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
jQuery中extend函数简单用法示例
2017/10/11 jQuery
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
Python实现的快速排序算法详解
2017/08/01 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
Python中collections模块的基本使用教程
2018/12/07 Python
python 读取修改pcap包的例子
2019/07/23 Python
python中判断数字是否为质数的实例讲解
2020/12/06 Python
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
英国鞋网:Rubber Sole
2020/03/03 全球购物
捐助倡议书范文
2014/04/15 职场文书
八月迷情观后感
2015/06/11 职场文书
python - asyncio异步编程
2021/04/06 Python
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android