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.