jQuery Responsive & Justified Image Gallery Plugin - Photogrid.js

Photogrid.js is a jQuery plugin for creating a responsive & justified grid to present your images with auto image resizing like the Google+ albums photo layout.

See also:

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

Basic Usage:

1. Insert a group of images into your web page.

<div class="photoGrid">
  <a class="item" href="#"><img src="1.jpg"></a>
  <a class="item" href="#"><img src="2.jpg"></a>
  <a class="item" href="#"><img src="3.jpg"></a>
  ...
</div>

2. The CSS to set the space between images.

.photoGrid .item {
  float: left;
  margin: 2px; 
}

.photoGrid .item img {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
}

3. Include jQuery javascript library and the jQuery Photogrid.js at the end of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="jquery.photogrid.js"></script> 

4. Call the function on the parent element to initialize the photo grid.

$(window).load(function() {
$('.photoGrid').photoGrid();
});

5. Avaliable options and defaults.

var defaults = {
itemSelector: ".item", // item selecor 
resize: true, // automatic reload grid on window size change
rowHeight: $(window).height() / 2, // looks best, but needs highres thumbs
callback: function() {} // fires when layouting grid is done
};

---

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