jQuery

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

August 10, 2016
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ライセンス