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

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ライセンス