masonry 瀑布流說明

Masonry是一 個用來佈局的jQuery插件,可是實現目前最流行的瀑布流佈局。
官方地址：http://masonry.desandro.com/

【演示地址】
http://masonry.desandro.com/

【插件參數】
itemSelector     class選擇器,默認'.item'
columnWidth     一列的寬度
isAnimated     使用jquery的佈局變化,默認true
animationOptions     animate屬性漸變效果(Object { queue: false, duration: 500 })
gutterWidth     列的間隙 Integer
isFitWidth     適應寬度Boolean
isResizableL     是否可調整大小 Boolean
isRTL     使用從右到左的佈局 Boolean

e.g

var $container = $('#container');
	$container.masonry(
	{
	     itemSelector : '.item',
	     columnWidth : 20,    //  一列的寬度
	     isAnimated : !Modernizr.csstransitions,
	     isFitWidth:true,
	     isResizableL:true
       });

【特別說明】
當需要排列圖片div時
需要調用
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
columnWidth : 240});
});

調用masonry插件的方法格式是：

$('#container').masonry( 'methodName', [optionalParameters] )
例如：

.masonry( 'appended', $content, isAnimatedFromBottom )//觸發添加到container的項目的佈局
.masonry( 'destroy' )// 完全移除masonry的功能 返回到元素預初始化狀態
.masonry( 'layout', $items, callback )// 指定項目的佈局
.masonry( 'option', options ) //設置option
.masonry( 'reloadItems' ) //重新聚合所有項目以當前的順序
.masonry( 'reload' ) //用於預先考慮或者插入項目 .masonry( 'reloadItems' )的簡化版
.masonry( 'remove', $items ) //從masonry實例或dom中移除項目

e.g

var itemsJsWalls = [], item;

  //ajax加載出來的
  $.each(data.items, function(i, datum)
  {
	item = '<div class="item example"><img src="${path}/'+datum.filePath+'"></br>' + datum.title + '</div>';
	itemsJsWalls.push(item);
   });
   var $itemsJsWall = $(itemsJsWalls.join(''));
   $itemsJsWall.imagesLoaded(function()
   {
	$container.masonry('remove', $loadingItem).masonry();
	$container.append($itemsJsWall);
	$container.masonry('appended', $itemsJsWall, true);
   });

關於下一頁的說明：下一頁不一定非要是2.html的格式，a.html?id=2之類的頁面都可以，但一定是要從2開始，之後的每次請求回自動變成3.html, 4.html或者a.html?id=3, a.html?id=4.