Masonry+Infinite-Scroll实现无刷新无分页完美瀑布流(转)
一、Masonry
是基于Jquery插件,用于对CSS布局的可移动层进行重新布局。Masonry愿意石工,可以这样形象的理解,页面上很多大小不一的移动层可以想象成散乱的石头,经过Masonry这个石工处理后,变成一堵美观的墙。
官网地址:http://masonry.desandro.com
二、Infinite Scroll
是基于Infinite Scroll也是基于Jquery插件,用于当滚动条滚动时追加页面内容,有网友称这种效果为”无刷新无分页完美瀑布流”展现方式。
官网地址:http://infinite-scroll.com/
三、Maonsry+Infinite-Scroll实现滚动式分页
在Masonry的Example里有自动的与infinite-scroll结合的实现滚动式分页的例子,地址在这里http://masonry.desandro.com/demos/infinite-scroll.html。
实际上这个例子还是有点粗糙,如果打开浏览器的开发者工具进行脚本跟踪,会发现翻到第5页后会出现404加载出错,到github下载整个project,可以看到目录pages下有2.html,3.html,4.html,5.html。Infinite-Scroll默认会往下翻,找不到6.html后报错。而且这个翻页的例子是生成了静态的html。我这里只贴出实现一个动态分页的实现代码(只是其中一个解决办法),希望能起到抛砖引玉的作用,希望有网友分享更加完美的代码。
代码采用Freemarker模板语言实现,代码片断:
<script type="text/javascript" src="/js/jquery/ jquery.1.7.1.min.js"></script>
<script type="text/javascript" src="/js/jquery/plugin/jquery.masonry.min.js"></script>
<script type="text/js" src="/scripts/jquery/plugin/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
var totalpage = ${result.totalPage};//这里是从服务端得到总共分页数
var readedpage = ;//当前滚动到的页数
</script>
<!-- page-nav 创建一个不可见对象,用于载入下一页数据入口元素点 -->
<nav id="page-nav">
<a href="${media_root}/billstudy/bill/question/all/null/1"></a>
</nav>
<div id="bills_main"> <div id="masonid" class="bills_conright">
<#if result?exists && (result.data.size() gt 0)>
<#list result.data as template>
<div class="bills_piccon">
//这里是每条数据的内容
</div>
</#list>
</#if>
</div>
<div class="clear"></div>
</div> <script>
$jq(function(){
var $container = $jq('#masonid');
readedpage++;
if(totalpage>){//如果总共只有一页,那就不需要滚动加载效果了
$jq("#page-nav a").attr("href","/billstudy/bill/question/all/null/"+readedpage);
$container.imagesLoaded(function(){
$container.masonry({
// itemSelector: '.bills_piccon'
// , columnWidth: 100
});
});//这里参数可以为空,但必须要初始化masonry,否则后面会报找不到方法appended。 $container.infinitescroll({
navSelector : '#page-nav', //指定page-nav
nextSelector : '#page-nav a', // page-nav下一页的链接
itemSelector : '.bills_piccon', // 要获取追加的页面元素
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// pathParse: ["/billstudy/bill/question/all/null/", ""],
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $jq( newElements ).css({ opacity: });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: });
$container.masonry('appended', $newElems, true);
readedpage++;//当前页滚动完后,定位到下一页
if(readedpage>totalpage){//如果滚动到超过最后一页,置成不要再滚动。
$jq("#page-nav").remove();
$container.infinitescroll({state:{isDone:true}});
}else{
//'#page-nav a置成下一页的值
$jq("#page-nav a").attr("href","/billstudy/bill/question/all/null/"+readedpage);
}
});
}
);
} });
</script>
Masonry+Infinite-Scroll实现无刷新无分页完美瀑布流(转)的更多相关文章
- masonry插件和infinitescroll插件实现无刷新无分页完美瀑布流
地址有:http://www.17sucai.com/pins/2657.html 如果你善于发现美,如果你善于观察新鲜的事物,如果你是一名有爱的前端攻城师或设计尸,那么你一定不会对下面图片中的结构感 ...
- angular -- 无刷新做分页
无刷新做分页参考地址: http://www.jq22.com/demo/angular201707111100/ 示例代码: <!DOCTYPE html> <html lang= ...
- sessionStorage用于分页,瀑布流和存储用户数据等
在手机网页开发中,会用到分页和瀑布流来分量显示数据.这里会遇到一个问题.当点击某条数据进入详情后,再按手机的返回键会到上一个页面,该页面是重新加载的. 本人在微信里用内置的qq浏览器打开页面,wind ...
- Gridview各种功能+AspNetPager+Ajax实现无刷新存储过程分页 (留着用)
存储过程: GetProductsCount1: GetProductsByPage: ) * @PageSize) +' id from test)' exec sp_executesql @sql ...
- jquery.pagination.js数据无刷新真分页
定义一个全局的分页加载变量,并设置为true: var __isReSearch=true; 定义分页的一些数据: var __PageSize = 10; var __SearchCondition ...
- 【转】基于jquery的无刷新表格分页
效果图 css样式 <style> html,body{margin: 0;padding:0} a:focus {outline: none;} /* 通用表格显示 */ table, ...
- jQuery.pager无刷新分页
刚刚学习前端的时候,需要一个无刷新的分页功能,找了一个不错的,大家也有很大分享,在这里写一个自己的部分代码,前后端都有,需要的小伙伴可以参考一下,代码不是完整的. 直接上伪代码<样式代码省略,部 ...
- [转]Oracle分页之三:利用PagerView来实现无刷新GridView
本文转自:http://www.cnblogs.com/scy251147/archive/2011/04/16/2018355.html 接上面一节,上面还存在问题就是分页控件使用的仍然是服务器端控 ...
- 本篇文章主要是对jquery+ajax+C#实现无刷新操作数据库数据的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如 ...
随机推荐
- IBM笔试题(_与equals的区别)
http://topic.csdn.net/t/20050325/08/3879427.html 题目:Integer i = new Integer(42) Long l ...
- codeforces 681D Gifts by the List dfs+构造
题意:给你一个森林,表示其祖先关系(自己也是自己的祖先),每个人有一个礼物(要送给这个人的固定的一个祖先) 让你构造一个序列,使得的对于每个人,这个序列中第一个出现的他的祖先,是他要送礼物的的那个祖先 ...
- Ye.云狐J2刷机笔记 | 完美切换内部存储卡和SD卡的改法.vold.fstab
================================================================================Ye.完美切换内部存储卡和SD卡成功.v ...
- android:照片涂画功能实现过程及原理
这个功能可以帮你实现,在图片上进行随意的涂抹,可以用于SNS产品. 绘图本身很简单,但是要实现在图片上指定的部分精确(位置,缩放)的绘图,就有点麻烦了. 下面讲讲实现过程及原理: UI构图 这个UI, ...
- container_of
在学习Linux驱动的过程中,遇到一个宏叫做container_of.该宏定义在include/linux/kernel.h中,首先来贴出它的代码: /** * container_of - cast ...
- 1.1……什么是3G
移动通信技术的发展 第一代移动通信技术(1st - Generation),只能进行语音通话. 第二代移动通信技术(2nd - Generation),可以收发短信.可以上网,但速度只有几十Kbps, ...
- Windows10输入法的切换
Alt+Shift 中⇒あ,あ⇒中 Shift 中⇒英,英⇒中 Alt+Caps Lock あ⇒カ,A⇒あ⇒カ Ctrl+Caps Loc ...
- 分布式文件系统-HDFS
HDFS Hadoop的核心就是HDFS与MapReduce.那么HDFS又是基于GFS的设计理念搞出来的. HDFS全称是Hadoop Distributed System.HDFS是为以流的方式存 ...
- NodeJS:树的序列化
本文也在我的博客edwardesire.com上,欢迎品尝. 接着上周的工作,我们把上周反序列得到的dtree对象输出到JSON,再将其序列化后存入MongoDB. 存入文档 先将上次得到的决策树对象 ...
- homework-02 "最大子数组之和"的问题进阶
代码编写 这次的作业瞬间难了好多,无论是问题本身的难度或者是单元测试这一原来没接触过的概念或者是命令行参数的处理这些琐碎的问题,都使得这次作业的完成说不上轻松. 最大子数组之和垂直水平相连的拓展问题解 ...