Chinaunix首页 | 论坛 | 博客
  • 博客访问: 741348
  • 博文数量: 225
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2722
  • 用 户 组: 普通用户
  • 注册时间: 2013-02-03 17:32
文章分类

全部博文(225)

文章存档

2019年(7)

2018年(16)

2017年(1)

2016年(26)

2015年(41)

2014年(15)

2013年(119)

我的朋友

分类: JavaScript

2013-04-03 10:31:22

1.infinite-scroll-jquery

参数详解:

$('#content').infinitescroll({
  navSelector  : "div.navigation", //导航的选择器,会被隐藏
  nextSelector : "div.navigation a:first",//包含下一页链接的选择器
  itemSelector : "#content div.post",//你将要取回的选项(内容块)
  debug        : true, //启用调试信息
  loadingImg   : "/img/loading.gif", //加载的时候显示的图片
                 //默认采用:""
  animate      : true, //当有新数据加载进来的时候,页面是否有动画效果,默认没有
  extraScrollPx: 50, //滚动条距离底部多少像素的时候开始加载,默认150
  bufferPx     : 40,//载入信息的显示时间,时间越大,载入信息显示时间越短
  errorCallback: function(){},//当出错的时候,比如404页面的时候执行的函数
  localMode    : true //是否允许载入具有相同函数的页面,默认为false
  },function(arrayOfNewElems){
  //程序执行完的回调函数
});

下载地址:git clone git://github.com/paulirish/infinite-scroll.git

2.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,//使用从右到左的布局  });  });下载地址:

3. 结合使用

前台用法:
   
   
       
           
        

        

        

后台处理
        $page =$page+1;
        $nexturl ="";       
        $this->view->assign('nexturl',$nexturl);//每次返回下一页的url


阅读(5213) | 评论(0) | 转发(1) |
0

上一篇:php二维数组去重复

下一篇:SSH分页

给主人留下些什么吧!~~