Jquery.isotope.js

A jquery plugin to organize the Grids and shuffle the grids automatically based on the height and width of the container.

Advantages

  1. It has different layouts that we can use to organize the grids in the way we want. Also enables us to extend the existing layouts extensively to suite our needs.

  2. It allows us to filter the grids based on the properties of grid. eg: "All employees, Male Employees, Female Employees"

  3. We can also order the grids based on priorities. From the above example, we can order employees based on their age( Male Employees with higher age).

  4. Good Documentation.

Setting up the plugin is real simple. Refer the site given below

[Jquery Isotpe (Jquery Isotope)][1]

There is no need for me to give the snippets, as they have very good documentation. However, I would like to share a code snippet that we have added in one of our project to suite our needs.

We enhanced one of the snippet given on jsfiddle:

[Adjusts grid without empty spaces- 2 x 2 (jsfiddle 2 x 2 layout)][2]
to
[Enhanced jsfiddle to support 3 x 3 without empty spaces(3 x 3)][3]

This two fiddles will give you an idea of how to order the grids based on index( Position of the element). So you can change the index based on attributes to give higher index.

Initially I was very confused about ordering grids. I hope fiddles will help you,If not, just drop a comment.

Thanks.
[1]: http://isotope.metafizzy.co/
[2]: http://jsfiddle.net/MKCYY/
[3]: http://jsfiddle.net/7ktm2/1/