`
zpball
  • 浏览: 916922 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery无刷新无分页完美瀑布流

阅读更多
这个是个非常棒的应用!

如果你善于发现美,如果你善于观察新鲜的事物,如果你是一名有爱的前端攻城师或设计尸,那么你一定不会对下面图片中的结构感到陌生。没错,这就是现在很火的瀑布流。也称砌墙效果。就是这种不稳定结构,就是这种交错之美,震撼着每个浏览者的视神经。对于习惯了传统条条框框布局的读者来说,这种方式无疑会让他们的鼠标自由摇摆…

实现这个效果需要两个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/
分享到:
评论

相关推荐

    8款Jquery+html5实现无限加载瀑布流特效

    在本资源中,Jquery被用来实现瀑布流布局的动态加载和交互功能。 HTML5是下一代HTML标准,它引入了许多新的API和元素,提高了网页的交互性和表现力。例如,HTML5的`&lt;canvas&gt;`元素可以用于绘制图形,`&lt;video&gt;`和`...

    jquery滚动滚动条加载数据 类似瀑布流

    **jQuery滚动加载数据实现瀑布流布局** 在网页设计中,瀑布流(Masonry)布局是一种流行的方式,它能展示信息时让页面看起来更加美观且有层次感,类似于QQ空间动态加载数据的效果。当用户滚动页面时,内容会随着...

    瀑布流——上拉加载+下拉刷新

    在瀑布流布局中,上拉加载通常需要与分页技术结合,每次加载一定数量的新内容,以保持页面流畅性。 下拉刷新,常见于各种新闻、社交应用,允许用户通过在顶部向下滑动屏幕来刷新内容。这是一种即时获取最新信息的...

    瀑布流分页加载asp.net mvc demo

    在ASP.NET MVC框架中实现瀑布流分页加载,可以提供用户更流畅、更节省流量的浏览体验。 在ASP.NET MVC中,瀑布流的实现主要涉及到以下几个关键知识点: 1. **ASP.NET MVC基础**:ASP.NET MVC是一个开源的Web应用...

    jquery美女无限加载瀑布流效果

    本主题聚焦于"jquery美女无限加载瀑布流效果",这是一个结合了jQuery、CSS3以及Ajax技术实现的网页动态展示方式,常见于图片分享、商品展示等应用场景。瀑布流布局以其独特的视觉体验,让用户在浏览过程中享受到类似...

    瀑布流兼容移动端ZeptojQuery插件下拉刷新、上拉加载更多

    综上所述,"瀑布流兼容移动端ZeptojQuery插件下拉刷新、上拉加载更多"是一个集成了瀑布流布局、下拉刷新和上拉加载更多功能的移动端插件,旨在简化开发流程并提供多种视觉风格,帮助开发者构建更加流畅、互动性强的...

    c# Ajax瀑布流

    5. **分页与无限滚动**:瀑布流通常结合分页或无限滚动功能,当用户滚动到底部时,自动触发Ajax请求加载更多内容。这需要监听滚动事件,计算页面距离底部的距离,当达到阈值时发送请求。 6. **响应式设计**:为了...

    asp.net +sql2005瀑布流

    1. AJAX异步请求:使用jQuery的$.ajax或$.getJSON方法,实现无刷新的数据加载。 2. JSON序列化与反序列化:ASP.NET提供了Json.NET库,可以方便地将对象转换为JSON字符串,客户端再将其反序列化为JavaScript对象。 3....

    dede瀑布流插件

    在织梦系统中,传统列表页通常采用分页方式显示,而【dede点击瀑布流插件】则引入了无限下拉(Infinite Scroll)的概念。这种技术允许用户在浏览页面时,当接近页面底部时,新内容会自动加载,而不是需要用户手动...

    瀑布流插件

    1. **动态加载**:为了提高用户体验,瀑布流插件通常支持分页加载或无限滚动加载。当用户滚动到页面底部时,会自动加载更多内容,无需手动点击加载按钮。 2. **响应式设计**:好的瀑布流插件应具备响应式布局能力,...

    瀑布流效果PHP+Js

    这通常用于分页加载更多的瀑布流内容。 - **Masonry插件**:jQuery Masonry是一个专门用于实现瀑布流布局的插件。它能够自动计算元素的位置,使它们在页面上形成美观的瀑布效果。 - **响应式设计**:JavaScript...

    php+ajax 实现瀑布流

    在本例中,可能需要一个分页查询来逐步加载更多内容,因为瀑布流通常会动态加载。 4. AJAX(Asynchronous JavaScript and XML): AJAX是JavaScript的一种技术,允许在不刷新整个页面的情况下与服务器交换数据并...

    .net瀑布流

    总的来说,".NET瀑布流"项目结合了.NET后端开发、jQuery前端交互和Ajax无刷新加载,实现了动态、流畅的瀑布流效果。这个项目对于学习.NET Web应用开发,特别是前后端交互和动态加载技术具有很好的实践意义。通过深入...

    jq.ajax+php+mysql实现瀑布流缓冲加载数据

    瀑布流布局是一种常见的网页设计方式,它以一种视觉上类似于瀑布的连续、多列、自适应高度的方式展示内容,常用于图片或商品展示。在本示例中,使用jQuery的AJAX技术、PHP服务器端处理和MySQL数据库进行数据管理,...

    15个精美的jq分页插件

    10. **jQuery Ajax Pagination**:通过Ajax实现无刷新分页,优化用户体验。 11. **Infinite Scroll with Pagination**:结合无限滚动和分页,当用户滚动到底部时自动加载更多内容。 12. **jQuery Simple Lazy ...

    无限瀑布流

    7. **兼容性处理**:对于老版本的IE浏览器,可能需要额外的兼容性处理,比如使用jQuery或其他库来代替原生的JavaScript方法,或者提供一个回退的非瀑布流布局。 在压缩包文件"无限加载瀑布流"中,可能包含了实现...

    Asp.net Table列表使用Wookmark (瀑布流,无限加载)

    在ASP.NET开发中,创建一个具有瀑布流布局和无限滚动功能的表格列表是一个常见的需求,这可以提升用户体验,特别是对于展示大量数据时。Wookmark.js是一个流行的选择,它是一个适用于固定宽度和自适应宽度元素的网格...

    JQ瀑布流加载

    总的来说,JQ瀑布流加载涉及到的技术点包括:jQuery的DOM操作、AJAX请求、JSON数据解析、滚动事件监听以及瀑布流布局算法的实现。通过这些技术的组合,我们可以在网页上实现流畅且美观的瀑布流加载效果,提高用户...

    Js 静态分页 10种风格

    9. 动态加载分页:当用户滚动到页面底部时,自动加载下一页内容,称为无限滚动或瀑布流分页。 10. 自适应布局分页:根据设备屏幕大小和方向自动调整分页样式,确保在不同设备上的良好显示。 实现这些分页风格的...

    dz论坛瀑布流插件,亲测可用,效果不错

    dz论坛瀑布流插件是一种将Discuz! 论坛版块内容展示方式转变为瀑布流布局的工具,这种布局方式能够使论坛的内容更加美观且易于浏览。瀑布流布局源自于图片分享网站,它使得用户在滚动页面时,内容会像水流一样自然...

Global site tag (gtag.js) - Google Analytics