瀑布流masonry布局API

　　Masonry是一款很好用的jquery网页布局插件，它可以去掉不同高度div之间的空白，让你的网页看上去更加的整齐、漂亮！效果如下图所示

Masonry：一款很好用的jquery网页瀑布流布局插件



官网插件下载地址以及详解地址：http://masonry.desandro.com/

masonry配置对象Options

Options are set with an object as second argument to the .masonry() method. All options are optional, and do not need to be set, but itemSelector and columnWidth are recommended.

$('#container').masonry({
  itemSelector: '.box',
  columnWidth: 240,
  animationOptions: {
    duration: 400
  }
});

配置项目 类型 默认值 说明/示例
animationOptions Object {queue:false,duration:500} Options used for jQuery animation. See the jQuery API for animate options for details. More details in Animating.
columnWidth Integer   Width in pixels of 1 column of your grid. If no columnWidth is specified, Masonry uses the width of the first item element.

Recommended if your layout has item elements that have multiple-column widths.

To set a dynamic column width, you can pass in a function that returns the value column width. The function provides an argument for the width of the container. Use this technique for fluid or responsive layouts.

$('#container').masonry({
  // set columnWidth a fraction of the container width
  columnWidth: function( containerWidth ) {
    return containerWidth / 5;
  }
});

containerStyle
 Object { position: 'relative' } CSS properties applied to the container. Masonry uses relative/absolute positioning to position item elements.
gutterWidth Integer 0 Adds additional spacing between columns.See Demo: Gutters
isAnimated
 Boolean false Enables jQuery animation on layout changes. See Docs: Animating. More details in Animating.
isFitWidth Boolean false If enabled, Masonry will size the width of the container to the nearest column. When enabled, Masonry will measure the width of the container’s parent element, not the width of the container. This option is ideal for centering Masonry layouts.See Demo: Centered.
isResizable Boolean true Triggers layout logic when browser window is resized.
isRTL Boolean false Enables right-to-left layout for languages like Hebrew and Arabic.See Demo: Right-to-left.
itemSelector String  

Filters item elements to selector. If not set, Masonry defaults to using the child elements of the container.

Recommended to avoid Masonry using any other hidden elements in its layout logic.

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

 

masonry方法Methods

Masonry offers several methods to extend functionality. Masonry’s methods follow the jQuery UI pattern.

$('#container').masonry( 'methodName', [optionalParameters] )
方法名称 说明和示例
appended 
.masonry( 'appended', $content, isAnimatedFromBottom )

Triggers layout on item elements that have been appended to the container.

See Demo: Adding items.

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

Setting the isAnimatedFromBottom argument to true will enable the newly appended items to be animated from the bottom, if animation is enabled.

$('#container').append( $boxes ).masonry( 'appended', $boxes, true );

The appended method is ideal to use Masonry with Infinite Scroll, in its callback.

See Demo: Infinite Scroll.

var $container = $('#container');
$container.infinitescroll({
    // infinite scroll options...
  },
  // trigger Masonry as a callback
  function( newElements ) {
    var $newElems = $( newElements );
    $container.masonry( 'appended', $newElems );
  }
);
destroy 
.masonry( 'destroy' )

Removes Masonry functionality completely. Returns element back to pre-initialized state.
layout 
.masonry( 'layout', $items, callback )

Positions specified item elements in layout.

layout will only position specified elements, and those elements will be positioned at the end of layout. Whereas .masonry() will position all items in the Masonry instance.

 
option
 
.masonry( 'option', options )

Sets options for plugin instance. Unlike passing options through .masonry(), using the option method will not trigger layout.

// set multiple options
.masonry( 'option', { columnWidth: 120, isAnimated: false } )

reloadItems
 
.masonry( 'reloadItems' )

Re-collects all item elements in their current order in the DOM.

 
reload
 
.masonry( 'reload' )

Convenience method for triggering reloadItems then .masonry(). Useful for prepending or inserting items.

See Demo: Adding items.

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




remove
 
.masonry( 'remove', $items )
Removes specified item elements from Masonry instance and the DOM.

 

remove

加支付宝好友偷能量挖...


原创文章，转载请注明出处：瀑布流masonry布局API

评论(0)Web开发网
阅读(1137)喜欢(0)JavaScript/Ajax开发技巧