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

<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>

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

$.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
    };

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

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

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

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

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

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

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

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

    {
        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}]
    }

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

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

MITライセンス

• Tag
• jQuery