- 浏览: 900548 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (498)
- J2EE (52)
- 数据库 (17)
- java基础 (43)
- web技术 (19)
- 程序设计 (6)
- 操作系统 (18)
- IT资讯 (7)
- 我的IT生活 (12)
- 学习笔记 (9)
- Jquery (25)
- JavaScript (18)
- spring (40)
- Hibernate (12)
- Struts (10)
- YUI (2)
- Extjs (22)
- .net (0)
- Eclipse (10)
- 社会主义 (2)
- 服务器 (9)
- CSS (8)
- 网络安全 (16)
- 版本控制 (9)
- PHP (2)
- Oracle (42)
- SQL server (1)
- Mysql (11)
- 项目管理 (3)
- 开发工具使用 (10)
- SQL语句 (7)
- Perl (0)
- Shell (6)
- 漏洞 (4)
- ibatis (5)
- hacker (2)
- SQL注入 (6)
- Hacker工具 (2)
- 入侵和渗透 (7)
- 插件/组件 (2)
- 最爱开源 (5)
- 常用软件 (2)
- DOS (1)
- HTML (2)
- Android (9)
- CMS (1)
- portal (8)
- Linux (7)
- OSGI (1)
- Mina (5)
- maven (2)
- hadoop (7)
- twitter storm (2)
- sap hana (0)
- OAuth (0)
- RESTful (1)
- Nginx (4)
- flex (1)
- Dubbo (1)
- redis (1)
- springMVC (1)
- node.js (1)
- solr (2)
- Flume (1)
- MongoDB (2)
- ElasticSearch (1)
最新评论
-
M_drm:
请问要怎么设置浏览器才不报没权限呢?
用JS在页面调用本地可执行文件的方法(ACTIVEX) -
Alexniver:
官方文档。When importing data into I ...
mysql导入数据过慢 解决方法 -
camelwoo:
我记得 Criteria 可以做连接查询与子查询,也可以做分页 ...
Hibernate总结篇二 -
zhenglongfei:
楼主如果SubKeyName 这个节点不存在,怎么办??怎么用 ...
Java操作注册表 -
yxx676229549:
用log4j 2 了
logback
这个是个非常棒的应用!
如果你善于发现美,如果你善于观察新鲜的事物,如果你是一名有爱的前端攻城师或设计尸,那么你一定不会对下面图片中的结构感到陌生。没错,这就是现在很火的瀑布流。也称砌墙效果。就是这种不稳定结构,就是这种交错之美,震撼着每个浏览者的视神经。对于习惯了传统条条框框布局的读者来说,这种方式无疑会让他们的鼠标自由摇摆…
实现这个效果需要两个jQuery插件infinite-scroll和Masonry。
infinite-scroll-jquery参数详解:
取消绑定事件的函数写法:$(window).unbind(‘.infscr’); 通过事件触发加载数据的写法: $(document).trigger(‘retrieve.infscr’); //比如加到某个click事件中
此插件还有一个鲜为人知的功能就是可以载入任何页面的选择器中的内容,可以是id以及是class,并转化到html存储。要比jquery自带的的load强大多了。
$('').load('/page/2/ #content div.post',function(){
$(this).appendTo('#content');
});
官方首页及下载地址: http://www.infinite-scroll.com/
Masonry参数详解:
官方首页及下载地址:http://masonry.desandro.com/index.html
双剑合璧演示代码:
最终效果演示:http://www.niumowang.org/demo/infinite/
如果你善于发现美,如果你善于观察新鲜的事物,如果你是一名有爱的前端攻城师或设计尸,那么你一定不会对下面图片中的结构感到陌生。没错,这就是现在很火的瀑布流。也称砌墙效果。就是这种不稳定结构,就是这种交错之美,震撼着每个浏览者的视神经。对于习惯了传统条条框框布局的读者来说,这种方式无疑会让他们的鼠标自由摇摆…
实现这个效果需要两个jQuery插件infinite-scroll和Masonry。
infinite-scroll-jquery参数详解:
$('#content').infinitescroll({ navSelector : "div.navigation", //导航的选择器,会被隐藏 nextSelector : "div.navigation a:first",//包含下一页链接的选择器 itemSelector : "#content div.post",//你将要取回的选项(内容块) debug : true, //启用调试信息 loadingImg : "/img/loading.gif", //加载的时候显示的图片 //默认采用:"http://www.infinite-scroll.com/loading.gif" animate : true, //当有新数据加载进来的时候,页面是否有动画效果,默认没有 extraScrollPx: 50, //滚动条距离底部多少像素的时候开始加载,默认150 bufferPx : 40,//载入信息的显示时间,时间越大,载入信息显示时间越短 errorCallback: function(){},//当出错的时候,比如404页面的时候执行的函数 localMode : true //是否允许载入具有相同函数的页面,默认为false },function(arrayOfNewElems){ //程序执行完的回调函数 });
取消绑定事件的函数写法:$(window).unbind(‘.infscr’); 通过事件触发加载数据的写法: $(document).trigger(‘retrieve.infscr’); //比如加到某个click事件中
此插件还有一个鲜为人知的功能就是可以载入任何页面的选择器中的内容,可以是id以及是class,并转化到html存储。要比jquery自带的的load强大多了。
$('').load('/page/2/ #content div.post',function(){
$(this).appendTo('#content');
});
官方首页及下载地址: http://www.infinite-scroll.com/
Masonry参数详解:
$(function(){ $(´#container´).masonry({ // options 设置选项 itemSelector : ´.item´, //子类元素选择器 columnWidth : 240 ,//一列的宽度 ,包括边距 220+10+10 isAnimated:true, //使用jquery的布局变化,是否启用动画效果 animationOptions:{ //jquery animate属性 ,动画效果选项。比如渐变效果 Object { queue: false, duration: 500 } }, gutterWidth:0,//列的间隙 isFitWidth:true,//自适应宽度 isResizableL:true,// 是否可调整大小 isRTL:false,//使用从右到左的布局 }); });
官方首页及下载地址:http://masonry.desandro.com/index.html
双剑合璧演示代码:
<script type="text/javascript" src="jquery-1.6.4.min.js"></script> <script src="jquery.infinitescroll.min.js" type="text/javascript"></script> <script src="jquery.masonry.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ var $container = $('#content ul'); //设置容器 $('#content ul').infinitescroll({ navSelector : "div.page .pages", //导航的选择器 nextSelector : "div.page .pages a.nextpage", //包含下一页链接的选择器 itemSelector : "#content ul li" //你将要取回的选项(内容块) }, function( newElements ) { //程序执行完的回调函数 var $newElems = $( newElements ); $container.masonry( 'appended', $newElems ); }); $('#content').masonry({ itemSelector : '#content li', //子类元素 columnWidth : 251 //一列的宽度 }); }); </script>
最终效果演示:http://www.niumowang.org/demo/infinite/
发表评论
-
UI组件:ext、JqueryEasyUI、miniui、dhtmlx及自定义页面
2013-05-16 13:43 3924UI组件:ext、JqueryEasyUI、miniui、dh ... -
jquery easy ui
2013-04-26 16:59 795http://bbs.btboys.com/forum.php ... -
26 个 jQuery使用技巧
2013-01-24 09:29 1022[url]http://blog.csdn.net/sunbo ... -
js 函数function用法
2013-01-24 09:23 1012http://blog.csdn.net/sunboy_205 ... -
js 数组Array用法
2013-01-24 09:22 940http://blog.csdn.net/sunboy_20 ... -
10 个实用的 jQuery 表单操作代码片段
2012-11-28 09:52 1095转 http://www.iteye.com/news/266 ... -
JQuery Ajax提交表单数据时的问题
2012-09-04 17:37 2467function toSaveOutList(){ ... -
jquery 花瓣网方砖布局
2012-08-22 13:11 1172花瓣网方砖布局 图片内容无限加载 用户体验才是王道 http ... -
Ajax动态加载目录树(jquery-treeview)
2012-08-08 18:05 0原文:http://blog.csdn.net/bob007a ... -
JQuery上传插件Uploadify详解及其中文按钮解决方案
2012-08-08 18:02 0官网: http://www.uploadify.com/do ... -
一个简单的动态关闭DIV框的效果,带关闭按钮
2012-07-14 12:34 1457jquery设置获取div位置 var top=obj. ... -
jquery判断对象是否存在
2012-07-14 12:33 944用jquery判断一个对象是否存在不能用 if($ (& ... -
jquery 取值
2012-07-12 14:28 1005jquery radio取值,checkbox取值,selec ... -
Jquery获取select,dropdownlist,checkbox下拉列表框的值
2012-07-10 17:45 1100jQuery获取 Select选择的Tex ... -
IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题
2011-12-27 16:30 2880在使用<input id="file_upl& ... -
jquery插件制作
2010-06-29 11:27 1344jquery插件丰富,很多都是很好用的,最近学习了一下如何制作 ... -
jQuery无刷新上传文件的插件推荐jform
2010-06-29 11:14 2383http://jquery.malsup.com/form/ -
【jQuery插件】冒泡效果
2010-05-31 15:53 1229基本的使用方法: view sourceprint?01 $ ... -
操作元素的CSS样式
2010-05-28 10:33 1334添加或去除元素集合的class name 1. 使用add ... -
jquery选择器(转载)
2010-05-27 09:38 1208基本选择器: $("#myELement" ...
相关推荐
无刷新分页
很好的一款jquery分层无刷新分页、各字段排序(northwind数据库)代码完整。供大家学习
jquery+json的无刷新分页 jquery+json的无刷新分页 jquery+json的无刷新分页 jquery+json的无刷新分页
jQuery 无刷新分页、排序、控件内部分页功能
用Jquery和PHP写的无刷新简单版分页
asp.net JqueryGrid 无刷新分页
这种形式的分页也是网上见得最多的,符合大部分网民的习惯,而且jQuery的引入,使本款分页效果实现无刷新,点击页码可直接显示内容,当然,测试页的内容不是太多,适合无刷新分页,当数据较多的时候,估计需要加入...
Ajax无刷新分页(jQuery+Json) 做了一个用jQuery来实现的用户控件,VS2008+Access jQuery+ashx+JSON 用ashx来接收请求,数据格式为JSON 实现了批量(选择)操作,编辑接口(反回两个值给用户进行自定义操作) 删除,...
jQuery无刷新分页插件是一款刷新页面不便的分页插件下载。
jquery+json 无刷新分页,这个是用VS2008+SQL2000开发的实例
Ajax无刷新分页Jquery 可以设置自己的分页样式,利用ashx接受事件请求,值得一学
jquery 无刷新分页 无刷新排序,这个是静态的数据。如果从数据库取出的数据,是一个道理。
PHP+jQuery+Ajax无刷新分页加搜索
jQuery .net 无刷新分页 ajax分页
jQuery瀑布流布局带分页效果,实现瀑布流布局主要分为两个部分,实现流体布局,这里我们采用绝对定位的方式实现,而是滚动触发的 Ajax 分页,这里采用 jQuery 的 Ajax 实现。
jquery 无刷新分页查询,超简单易用!
jQuery表格插件无刷新表格控制分页显示数据
JqueryAjaxPage 基本java jquery无刷新数据库分页,分页形式是基本数字格式的,代码完整!欢迎大家下载..
在网络里找来找去,找来找去,找到失望了,终于被我找到一个可以用的 jquery 无刷新分页,我再在这个代码里改变了一写代码, // public string pageCount = string.Empty; //总条目数 protected void Page_Load...
jquery分页,无刷新,AJAX,排序,分页,查找