- 浏览: 916922 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (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 3976UI组件:ext、JqueryEasyUI、miniui、dh ... -
jquery easy ui
2013-04-26 16:59 826http://bbs.btboys.com/forum.php ... -
26 个 jQuery使用技巧
2013-01-24 09:29 1049[url]http://blog.csdn.net/sunbo ... -
js 函数function用法
2013-01-24 09:23 1050http://blog.csdn.net/sunboy_205 ... -
js 数组Array用法
2013-01-24 09:22 972http://blog.csdn.net/sunboy_20 ... -
10 个实用的 jQuery 表单操作代码片段
2012-11-28 09:52 1123转 http://www.iteye.com/news/266 ... -
JQuery Ajax提交表单数据时的问题
2012-09-04 17:37 2496function toSaveOutList(){ ... -
jquery 花瓣网方砖布局
2012-08-22 13:11 1204花瓣网方砖布局 图片内容无限加载 用户体验才是王道 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 1481jquery设置获取div位置 var top=obj. ... -
jquery判断对象是否存在
2012-07-14 12:33 965用jquery判断一个对象是否存在不能用 if($ (& ... -
jquery 取值
2012-07-12 14:28 1036jquery radio取值,checkbox取值,selec ... -
Jquery获取select,dropdownlist,checkbox下拉列表框的值
2012-07-10 17:45 1134jQuery获取 Select选择的Tex ... -
IE浏览器上传文件时本地路径变成”C:\fakepath\”的问题
2011-12-27 16:30 2946在使用<input id="file_upl& ... -
jquery插件制作
2010-06-29 11:27 1378jquery插件丰富,很多都是很好用的,最近学习了一下如何制作 ... -
jQuery无刷新上传文件的插件推荐jform
2010-06-29 11:14 2407http://jquery.malsup.com/form/ -
【jQuery插件】冒泡效果
2010-05-31 15:53 1258基本的使用方法: view sourceprint?01 $ ... -
操作元素的CSS样式
2010-05-28 10:33 1360添加或去除元素集合的class name 1. 使用add ... -
jquery选择器(转载)
2010-05-27 09:38 1239基本选择器: $("#myELement" ...
相关推荐
在本资源中,Jquery被用来实现瀑布流布局的动态加载和交互功能。 HTML5是下一代HTML标准,它引入了许多新的API和元素,提高了网页的交互性和表现力。例如,HTML5的`<canvas>`元素可以用于绘制图形,`<video>`和`...
**jQuery滚动加载数据实现瀑布流布局** 在网页设计中,瀑布流(Masonry)布局是一种流行的方式,它能展示信息时让页面看起来更加美观且有层次感,类似于QQ空间动态加载数据的效果。当用户滚动页面时,内容会随着...
在瀑布流布局中,上拉加载通常需要与分页技术结合,每次加载一定数量的新内容,以保持页面流畅性。 下拉刷新,常见于各种新闻、社交应用,允许用户通过在顶部向下滑动屏幕来刷新内容。这是一种即时获取最新信息的...
在ASP.NET MVC框架中实现瀑布流分页加载,可以提供用户更流畅、更节省流量的浏览体验。 在ASP.NET MVC中,瀑布流的实现主要涉及到以下几个关键知识点: 1. **ASP.NET MVC基础**:ASP.NET MVC是一个开源的Web应用...
本主题聚焦于"jquery美女无限加载瀑布流效果",这是一个结合了jQuery、CSS3以及Ajax技术实现的网页动态展示方式,常见于图片分享、商品展示等应用场景。瀑布流布局以其独特的视觉体验,让用户在浏览过程中享受到类似...
综上所述,"瀑布流兼容移动端ZeptojQuery插件下拉刷新、上拉加载更多"是一个集成了瀑布流布局、下拉刷新和上拉加载更多功能的移动端插件,旨在简化开发流程并提供多种视觉风格,帮助开发者构建更加流畅、互动性强的...
5. **分页与无限滚动**:瀑布流通常结合分页或无限滚动功能,当用户滚动到底部时,自动触发Ajax请求加载更多内容。这需要监听滚动事件,计算页面距离底部的距离,当达到阈值时发送请求。 6. **响应式设计**:为了...
1. AJAX异步请求:使用jQuery的$.ajax或$.getJSON方法,实现无刷新的数据加载。 2. JSON序列化与反序列化:ASP.NET提供了Json.NET库,可以方便地将对象转换为JSON字符串,客户端再将其反序列化为JavaScript对象。 3....
在织梦系统中,传统列表页通常采用分页方式显示,而【dede点击瀑布流插件】则引入了无限下拉(Infinite Scroll)的概念。这种技术允许用户在浏览页面时,当接近页面底部时,新内容会自动加载,而不是需要用户手动...
1. **动态加载**:为了提高用户体验,瀑布流插件通常支持分页加载或无限滚动加载。当用户滚动到页面底部时,会自动加载更多内容,无需手动点击加载按钮。 2. **响应式设计**:好的瀑布流插件应具备响应式布局能力,...
这通常用于分页加载更多的瀑布流内容。 - **Masonry插件**:jQuery Masonry是一个专门用于实现瀑布流布局的插件。它能够自动计算元素的位置,使它们在页面上形成美观的瀑布效果。 - **响应式设计**:JavaScript...
在本例中,可能需要一个分页查询来逐步加载更多内容,因为瀑布流通常会动态加载。 4. AJAX(Asynchronous JavaScript and XML): AJAX是JavaScript的一种技术,允许在不刷新整个页面的情况下与服务器交换数据并...
总的来说,".NET瀑布流"项目结合了.NET后端开发、jQuery前端交互和Ajax无刷新加载,实现了动态、流畅的瀑布流效果。这个项目对于学习.NET Web应用开发,特别是前后端交互和动态加载技术具有很好的实践意义。通过深入...
瀑布流布局是一种常见的网页设计方式,它以一种视觉上类似于瀑布的连续、多列、自适应高度的方式展示内容,常用于图片或商品展示。在本示例中,使用jQuery的AJAX技术、PHP服务器端处理和MySQL数据库进行数据管理,...
10. **jQuery Ajax Pagination**:通过Ajax实现无刷新分页,优化用户体验。 11. **Infinite Scroll with Pagination**:结合无限滚动和分页,当用户滚动到底部时自动加载更多内容。 12. **jQuery Simple Lazy ...
7. **兼容性处理**:对于老版本的IE浏览器,可能需要额外的兼容性处理,比如使用jQuery或其他库来代替原生的JavaScript方法,或者提供一个回退的非瀑布流布局。 在压缩包文件"无限加载瀑布流"中,可能包含了实现...
在ASP.NET开发中,创建一个具有瀑布流布局和无限滚动功能的表格列表是一个常见的需求,这可以提升用户体验,特别是对于展示大量数据时。Wookmark.js是一个流行的选择,它是一个适用于固定宽度和自适应宽度元素的网格...
总的来说,JQ瀑布流加载涉及到的技术点包括:jQuery的DOM操作、AJAX请求、JSON数据解析、滚动事件监听以及瀑布流布局算法的实现。通过这些技术的组合,我们可以在网页上实现流畅且美观的瀑布流加载效果,提高用户...
9. 动态加载分页:当用户滚动到页面底部时,自动加载下一页内容,称为无限滚动或瀑布流分页。 10. 自适应布局分页:根据设备屏幕大小和方向自动调整分页样式,确保在不同设备上的良好显示。 实现这些分页风格的...
dz论坛瀑布流插件是一种将Discuz! 论坛版块内容展示方式转变为瀑布流布局的工具,这种布局方式能够使论坛的内容更加美观且易于浏览。瀑布流布局源自于图片分享网站,它使得用户在滚动页面时,内容会像水流一样自然...