Masonry-like Responsive Cascading Grid Layout Plugin - MosaicJS

Mosaic is a Masonry inspired robust jQuery grid layout plugin which takes a list of DIV elements and arrange them in a responsive, dynamic tile mosaic grid.

Basic usage:

1. Include the needed JavaScript and CSS files on the webpage which has jQuery library installed.

<link href="mosaic.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="mosaic.js"></script>

2. Create a mosaic tile with 2 columns and 4 rows.

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

3. Initialize the plugin by calling the mosaic() function on the parent element.

$('#container').mosaic({
  // options go here
});

4. Options and defaults.

// the number of columns
columns: 1,

// the number of rows
rows: null,

// the space between tiles
gutter: 0,

// the width (in either pixels or percent) of a column
colWidth: null,

// the height (in either pixels or percent) of a row
rowHeight: null,

// The selector of an element whose height and width correspond to the height of a row and the width of a column
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

Change log:

2015-10-04

• JS update.

---

This awesome jQuery plugin is developed by ariellebryn. For more Advanced Usages, please check the demo page or visit the official website.