Question to say "I can!"

河北快三软件:jQuery无刷新无分页完美瀑布流

2012-07-07

这个是个非常棒的应用!

参考于:朽木——jQuery无刷新无分页完美瀑布流

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

瀑布流

实现这个效果需要两个jQuery插件infinite-scroll和Masonry。

infinite-scroll-jquery

参数详解:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('#content').infinitescroll({
  navSelector  : "div.navigation", //导航的选择器,会被隐藏
  nextSelector : "div.navigation a:first",//包含下一页链接的选择器
  itemSelector : "#content div.post",//你将要取回的选项(内容块)
  debug        : true, //启用调试信息
  loadingImg   : "/img/loading.gif", //加载的时候显示的图片
                 //默认采用:"//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');
});

官方首页及下载地址: //www.infinite-scroll.com/

Masonry

参数详解:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 $(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,//使用从右到左的布局
 });
 });

官方首页及下载地址://masonry.desandro.com/index.html

双剑合璧

演示代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>

最终效果演示

本文部分资料整理自:Niumowang

作者:admin | Categories:设计问题 | Tags: 、、、

一条评论

  1. 说道:

    IE6下布局都乱了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

  • 男人不安全了?日本读心美女机器人,你咋想的它全知道! 2019-05-03
  • 重庆市永川区:“1+8+X”模式探索基层人民调解新路子 2019-05-03
  • 春节我在岗:爸妈,儿子在军营给您们拜年了 2019-04-22
  • 传统文化,在中国文化里,居住是衡量一个家庭生活的基本因素。 2019-04-15
  • 俄韩就铺设途经朝鲜的天然气管道恢复磋商 2019-04-15
  • 经营者要想“我心换你心”,就要未雨绸缪,让不诚信的诱惑少一点,如此才能在市场中生存下来。反过来说,承担不起亏损就关门歇业,是否也是一种不诚信呢? 2019-04-11
  • 江西省能源集团公司党委副书记胡运生等2人被调查 2019-04-11
  • 乌鲁木齐:这个端午,他们的假日叫“坚守” 2019-03-29
  • 中国电信安康分公司60家智慧家庭便民服务中心盛大开业中国电信安康-最新活动 2019-03-28
  • 中心城区核心片组完成签约清零任务 2019-03-28
  • (Dos sesiones) Legislativo nacional de China concluye sesión anual Spanish.xinhuanet.com 2019-03-28
  • 西班牙一旅游公司官网竟把台湾和香港列为“国家” 2019-03-27
  • 【一周反腐】广东、重庆等地多名厅级干部被查处 2019-03-27
  • 任志强:房价走势并不是不可预测市场 开炮 2019-03-26
  • 世界醉美10条街道,亚洲只有中国上榜! 2019-03-23
  • 746| 140| 452| 458| 710| 158| 80| 952| 633| 302|