Skip to content
jQuery plugin for align elements
HTML JavaScript CSS
Branch: master
Clone or download
Latest commit 3d87926 Jun 21, 2015
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Update info Apr 9, 2014
img Ready Feb 12, 2013
js Update info Apr 9, 2014 Update demo image Jun 21, 2015
index.html Update info Apr 9, 2014
jMosaic.jquery.json Update info Apr 9, 2014



A lightweight jQuery plugin that can take a list of page elements and arrange them in a beautiful, tight-fitted tile mosaic grid.

The proportions of the elements don't change. As the elements can be used: img, div, li etc. Demo


jMosaic plugin uses the jQuery JavaScript library, only. So, include just these two javascript files in your header.

<script src="js/jquery.js"></script>
<script src="js/jquery.jMosaic.js"></script>

Include the CSS file responsible to style the jMosaic plugin.

<link rel="stylesheet" href="css/jquery.jMosaic.css"/ >

Select a block which contains the necessary elements (items_type).

<div class="pictures">
	<img src="img/one.jpg" width="267" height="400"/>
	<img src="img/two.jpg" width="500" height="350"/>
	. . .
	<img src="img/last.jpg" width="400" height="300"/>

After it, call the jQuery jMosaic plugin.


For blocks or images of size, you can use $(document).ready().

If this image without attribute width or heigh, you can use $(window).load().

You can update on $(window).resize().


You can pass an options object in plugin init method.

  • items_type : Type of elements in the selector (Default: img);
  • min_row_height : Minimal row height (Default: 150);
  • margin : Space between elements (Default: 0);
  • is_first_big : First row - largest (Default: false);
  items_type: "li", 
  min_row_height: 200, 
  margin: 3, 
  is_first_big: true


clear : Clean up the selector from the plugin;



View example

You can’t perform that action at this time.