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", //加載的時候顯示的圖片
                 //默認采用:"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

參數詳解:

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,//使用從右到左的布局
 });
 });

官方首頁及下載地址:http://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下布局都亂了。

發表評論

電子郵件地址不會被公開。 必填項已用*標注

*

澳洲f1赛车b盘开奖套路 福彩快3技巧口诀图解 黑龙江p62开奖结果查询结果 幸运赛车app 浙江体彩20选5开奖号 北京赛车pk拾开奖直播 p62怎么兑奖 贵州茅台股票k线图 陕西快乐10分钟开奖走势图 上海期货配资哪里好 独平码四中四 福建省11选5的走 赌博 福建体彩36选七今晚 期货配资怎么挣钱 吉林十一选五app 广东11选五5一定牛电脑版