Fancy & Responsive jQuery Diamond Layout Plugin - diamonds.js

Diamonds is an amazing jQuery plugin for easily creating a responsive diamond layout using CSS3 transforms that tilts every items by 45 degrees to make your website unique. 

How to use it:

1. Load jQuery javascript library and JQuery diamonds plugin in the footer of your web page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.diamonds.js"></script> 

2. Include required jQuery diamonds stylesheet on the web page

<link rel="stylesheet" type="text/css" href="diamonds.css" />

3. Create the html for the layout

<div class="demo">
<a href="#" class="item">Item 1</a>
<a href="#" class="item">Item 2</a>
<a href="#" class="item">Item 3</a>
... 
</div>

4. Call the plugin with options

<script>
$("#demo").diamonds({
    size : 200, // Size of diamonds in pixels. Both width and height. 
    gap : 5, // Pixels between each square.
    hideIncompleteRow : false, // Hide last row if there are not enough items to fill it completely.
    autoRedraw : true, // Auto redraw diamonds when it detects resizing.
    itemSelector : ".item" // the css selector to use to select diamonds-items.
});
</script>

Change log:

• Fixed layout issue in Chrome 33 Win 8

---

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