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'