AJAX实现瀑布流触发分页与分页触发瀑布流的方法
所谓的瀑布流效果就正如轻图床首页效果那样,多个内容相近的栏目紧密排列,尽量使到栏目间的间隙最小(即流体布局),并且随着页面滚动条向下滚动,新的数据会追加至当前页面的尾部直到所有数据加载完毕(滚动触发的 Ajax 翻页)。 瀑布流触发分页这里说一下思路,虽然下面的实例中不能全都用到: 1.当进入屏幕时,判断内容是否为空,如果不为空,开始初始化数据。 2.当往屏幕下拉时,判断数据的最底部与屏幕高度+滚动的高度的大小。如果最底部小于上面两者之和,重新请求接口,即加载数据。 3.当遇到数据超过某个页数时,停止加载或者用分页的形式显示,点击再显示内容。 以上就是比较简单的随着下拉内容不断加载的思路代码。 JSON格式类似于(如果是动态接口,可以通过callback函数,则这里不用加fill()): 原来静态也可以做接口回调。通过静态处理,则大大缓解了服务器压力和加速生成内容,是大流量网站必备的处理方式。 jQuery的ajax方法实现分页触发瀑布流1.通过 Ajax 的方式获取下一页的内容我们需要网页中具有如下 HTML 结构的导航, next_link 为下一页的 url。相应的 css 以下这段代码为通过 Ajax 的方式获取下一页的内容,并追加到当前内容的末尾。 $(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() 方法即可。3.对 Ajax 翻页过程作出修饰在上面的过程中已经有完整的瀑布流布局,但是翻页过程中并没有任何提示,而且直接插入多张图片可能会影响用户体验,因此需要对翻页过程作出一些修饰,下面给出完整代码。 这里需要增加一个如下的元素,用于提示正在加载新内容或提示已到了最后一页。给力加载中……
相应的 css 代码如下: $(document).height() - 10 ) {
// 判断下一页链接是否为空
if( nextHref != undefined ) {
// 显示正在加载模块
$("#page_loading").show("slow");
// Ajax 翻页
$.ajax( {
url: $("#page_nav a").attr("href"),nextHref);
$("#thumbs").append(result);
// 把新的内容设置为透明
$newElems = result.css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$container.masonry( 'appended',true );
// 渐显新的内容
$newElems.animate({ opacity: 1 });
// 隐藏正在加载模块
$("#page_loading").hide("slow");
});
} (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |