jQuery Google+ Albums Image Layout Plugin - Bricks

Bricks is a small jQuery plugin that has the ability to automatically arrange the images or DIVs to fit the window's size, similar to the google plus albums image layout. It also provides a layout method to recompute the layout (useful on resize, items added ...).

See also:

• Google+ Albums Like Photo Gallery Plugin For jQuery - collagePlus

How to use it:

1. Load the latest jQuery library and jQuery bricks plugin in your document

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery-bricks.min.js"></script>

2. The html

<div id="container">
    <img src="http://placehold.it/225x300" />
    <img src="http://placehold.it/400x300" />
    <img src="http://placehold.it/317x400" />
    <img src="http://placehold.it/275x300" />
    <img src="http://placehold.it/127x300" />
    <img src="http://placehold.it/275x300" />
    <img src="http://placehold.it/127x300" />
    <img src="http://placehold.it/600x300" />
    <img src="http://placehold.it/317x300" />
    <img src="http://placehold.it/275x300" />
    <img src="http://placehold.it/95x300" />
    <img src="http://placehold.it/300x300" />
    <img src="http://placehold.it/275x300" />
    <img src="http://placehold.it/127x300" />
    <img src="http://placehold.it/375x300" />
    <img src="http://placehold.it/200x300" />
</div>

3. The sample CSS

<style>
body {
    background-color:#AAA;
}
#container {
    font-size:0px;
}
#container img {
    margin:5px;
}
</style>

4. Call the plugin

<script>
$(function(){
  $('#container').bricks();
});
</script>

5. Options and method

$(function(){
  $('#container').bricks({
    maxRowHeight: 100, // maximum row height in the wall
    itemSelector: 'div.item' // jquery selector for the items
  });
  $('#container').data('bricks').layout(); // recomputes the layout (useful on resize, items added ...)
});

---

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