html layout 插件,Isotope · Layout modes_jQuery之家-自由分享jQuery、html5、css3的插件库...

Layout modes

Isotope has a versatile layout engine allowing you to position items with different layout logic. Set and change layout mode with the layoutMode option.

masonry

fitRows

cellsByRow

vertical

packery

masonryHorizontal

fitColumns

cellsByColumn

horizontal

$container.isotope({...})

1

2

3

4

5

6

7

8

9

10

11

12

Layout mode options

Layout modes can have their own separate options. These are set in a corresponding object within the options.

var $container = $('#container').isotope({

// main isotope options

itemSelector: '.item',

layoutMode: 'cellsByRow',

// options for cellsByRow layout mode

cellsByRow: {

columnWidth: 200,

rowHeight: 150

},

// options for masonry layout mode

masonry: {

columnWidth: '.grid-sizer'

}

})

Horizontal layouts

Horizontal layout modes (masonryHorizontal, fitColumns, cellsByColumn, and horizontal) need a container that has a height value. Be sure that your CSS has height set.

#container {

/* either of these will work for horizontal Isotope layouts */

height:80%;

height:480px;

}

Included modes

masonry, fitRows, and vertical are included in isotope.pkgd.js and if you install Isotope via Bower. All other layout modes need to installed separately.

masonry

The default layout mode. Items are arranged in a vertically cascading grid.

masonry: {

columnWidth: 50

}

fitRows

Items are arranged into rows. Rows progress vertically. Similar to what you would expect from a layout that uses CSS floats.

fitRows is ideal for items that have the same height.

cellsByRow

A vertical grid layout where items are centered inside each cell. The grid is defined by columnWidth and rowHeight options.

layoutMode: 'cellsByRow',

cellsByRow: {

columnWidth: 110,

rowHeight: 110

}

vertical

Items are stacked vertically.

masonryHorizontal

Horizontal version of masonry. Items are arranged in a horizontally cascading grid.

layoutMode: 'masonryHorizontal',

masonry: {

rowHeight: 50

}

fitColumns

Items are arranged into columns. Columns progress horizontally.

fitColumns is ideal for items that have the same width.

cellsByColumn

A horizontal grid layout where items are centered inside each cell. The grid is defined by columnWidth and rowHeight options.

layoutMode: 'cellsByColumn',

cellsByColumn: {

columnWidth: 110,

rowHeight: 110

}

horizontal

Items are arranged horizontally.

layoutMode: 'horizontal'