【jQuery】MasonryレイアウトのためのjQueryプラグイン。Mosaic

Mosaicはあらかじめ作られたグリッドに簡単にタイルを配置し、自動レイアウトすることができるレイアウトのフレームワークです。

HTML

<div class="mosaic-tile"></div>
<div class="mosaic-tile width-4"></div>
<div class="mosaic-tile height-2"></div>
<div class="mosaic-tile width-3 height-2"></div>

MosaicJS

$(/* Container Selector */).mosaic({
// options go here
});

Defaults

$.fn.mosaic.defaults = {
columns: 1,
rows: null,
gutter: 0,
colWidth: null,
rowHeight: null,
tileModel: null,
// If your layout is all in percentages
layoutInPercent: true,
// If your height is actually padding-bottom, it depends on the width, not the height, of the parent
heightFromWidth: false, 
// To be used if the grid layout should be changed with different browser widths
breakpoints: null
};

Only specify columns

$("#mosaic-grid").mosaic({
columns: 10
});

Only specify rows

$("#mosaic-grid").mosaic({
rows: 10
});

Both rows and columns are specified

$("#mosaic-grid").mosaic({
columns: 10,
rows: 10
});

A tileModel is given

$("#mosaic-grid).mosaic({
columns: 10,
tileModel: '.sizer'
});

A colWidth is specified

$("#mosaic-grid).mosaic({
columns: 10,
colWidth: 10 // Default unit type is percent
});
$("#mosaic-grid).mosaic({
columns: 10,
colWidth: '.width-sizer'
});

A rowHeight is specified

$("#mosaic-grid).mosaic({
columns: 10,
rowHeight: '.height-sizer'
});

Both colWidth and rowHeight are specified.

$("#mosaic-grid).mosaic({
columns: 10,
colWidth: 10,
rowHeight: 15
});

Breakpoints

    {
size: <number>,  // The minimum width for the breakpoint
… // Any of the possible options
}

Example:

    {
…, // Original options
breakpoints: [{size: 1200, columns: 10}, {size: 700, columns: 8}]
}

Positioning Tiles

<div class=”mosaic-tile” data-mosaic-row="1" data-mosaic-col="4"></div>

Position Breakpoints

`<div data-mosaic-row="1" data-mosaic-col="0: 0, 700: 4, 1200: 5" class="mosaic-tile”></div>`

MITライセンス

 
Mosaic

【jQuery】MasonryレイアウトのためのjQueryプラグイン。Mosaic

  • LATEST
  • RELATED
  • POPULAR