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 相关文章推荐
js css样式操作代码(批量操作)
Oct 09 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
淘宝搜索框效果实现分析
Mar 05 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 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通过COM使用ADODB的简单例子
2006/12/31 PHP
php中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
PHP 实现缩略图
2021/03/09 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
中医学专业自荐信范文
2014/04/01 职场文书
机电一体化专业求职信
2014/07/22 职场文书
城南旧事电影观后感
2015/06/16 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript
拙作再改《我的收音机情缘》
2022/04/05 无线电
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript