每日一讲：masonry响应式页面布局(3)---options和methods

第1篇中已经演示了，可以通过$('#container').masonry() 方法启动布局，同时该方法内还可以设置参数，下面我们就将这里的参数进行下详细说明。

Options(参数)

columnWidth

用于设置每个砖块的宽度(width)。如果未设置columnWidth参数，masonry将计算第1个砖块的宽度作为columnWidth的值。计算方法应是：margin-left +　border-left + padding-left + width。

$('#container').masonry({      
       columnWidth : 140
 });

另外，该参数还可以传入一个函数，函数的返回值将作为columnWidth的值，函数的参数为容器(container)的宽度。使用这个技术就可以设置一个动态宽度，来实现诸如流式(fluid )的或响应式(responsive )的布局。

$('#container').masonry({
        columnWidth: function( containerWidth ) {
              return containerWidth / 5;
         }
 });

containerStyle

该参数用于设置容器(container)的css属性position，有俩个值： relative、absolute，默认是relative。参数是个对象类型。

$('#container').masonry({
     containerStyle:{position: 'absolute'}
});

gutterWidth

设置砖块间的间距。

$('#container').masonry({
     gutterWidth:20
 });

设置20px的间距，这个间距会体现在每个砖块的left属性上，注意观察。

isFitWidth

设置容器(container)的宽度是否自适应，即随着浏览器窗口大小或分辨率的变化自动调整。该参数是个boolean值，默认为false。

$('#container').masonry({
      isFitWidth: true
 });

isResizable

浏览器窗口大小调整时是否自动触发重新布局。默认为true。

$('#container').masonry({
       isResizable: true

 });

isRTL

设置布局的排列方式，即：定位砖块时，是从左向右排列还是从右向左排列。默认值为false，即从左向右。

$('#container').masonry({
       isRTL:false
 });

itemSelector

该参数我们比较熟悉，设置砖块的样式，同时也标识某个dom元素是否是个砖块，没有该样式的不在布局控制之内。

$('#container').masonry({
          itemSelector : '.box'
    });

isAnimated

该参数可以与animationOptions参数配合使用，用于设置布局过程中是否采用jquery的动画效果。默认值为false(不采用动画效果)。该动画效果将会使用jquery的animate()方法，同时利用animationOptions参数向animate方法内传入参数。

$('#container').masonry({
  // options...
  isAnimated: true,
  animationOptions: {
    duration: 750,
    easing: 'linear',
    queue: false
  }
});

Methods(方法)

Masonry为用户提供了几个方法用于对布局进行控制。要说叫方法不如称命令，这些命令的通用格式如下：

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

methodName为方法名(命令名)， [optionalParameters]为该方法对应的参数。下面就对这些方法逐一进行介绍。

appended方法

.masonry( 'appended', $content, isAnimatedFromBottom )

appended方法用于向容器的尾部追加砖块，并对追加的砖块进行布局。$content参数为追加的砖块列表。

var $boxes = $('<div class="box"/><div class="box"/><div class="box"/>');
$('#container').append( $boxes ).masonry( 'appended', $boxes );

注意：必须首先利用jquery的append方法将待追加的砖块链接到容器尾部，然后再调用appended方法完成布局。appended方法通过内部调用layout(下面会说)方法完成布局。

destroy

移除Masonry的所有功能，将每个砖块的样式或状态恢复到最初的状态。

$('#container').masonry( 'destroy' )

layout

这个方法在上文提到过，作用是对选定的(特定的)砖块元素进行布局。

.masonry( 'layout', $items, callback )

$items参数为待布局的砖块元素，callback参数是个回调函数，当layout方法被调用，当在真正布局以前会被触发调用。

layout方法的功能与.masonry() 的功能正好对应，.masonry() 是对容器内的所有砖块进行布局或重新布局。

注意：该方法会将选定的待布局的砖块布局到容器的尾部，如果这个待布局的砖块事先已经被布局了，那么也会将它从原位置移到容器尾部。

option

option方法用于对Masonry的参数进行重新设置，但该设置不会立即起作用，需要到下一次布局时才会使用。此时我们可以立即调用$('#container').masonry() 或reload(下面会说到)方法进行重新布局。

.masonry( 'option', options )

例子：

$('#container').masonry( 'option', { columnWidth: 120, isAnimated: false } ).masonry( 'reload' );

reloadItems

该方法一般不单独使用，是作为reload方法的内部方法使用。

reload

重新加载或布局。该方法和.masonry()方法类似都可完成布局功能，该方法实质上是 reloadItems 方法和masonry()方法的便捷调用。

var $boxes = $('<div class="box"/><div class="box"/><div class="box"/>');
$('#container').prepend( $boxes ).masonry( 'reload' );

remove

移除选定的砖块

.masonry( 'remove', $items )

调用该方法移除指定元素后，并不会自动进行重新布局，此时可手工调用$('#container').masonry()进行重新布局。

var $items = $("#item2");
$('#container').masonry("remove", $items);
//$('#container').masonry();

注：对于布局，如果可以尽量使用layout方法进行布局，避免使用reload方法或masonry()方法，后者会对整个容器内的所有砖块进行重新布局，而layout方法只对特定的砖块布局，效率上会有差异。