Linear Partitioning Based Photo Gallery with jQuery - Perfect Layout

Perfect Layout is a jQuery plugin that helps you generate a responsive, neat, compact and linear partitioning based image layout for your photo gallery.

How to use it:

1. Import jQuery library and the jQuery perfect layout plugin into your project.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/perfectLayout.js"></script>

2. Create an empty element for your photo gallery.

<div id="gallery"></div>

3. Prepare an array of images for your photo gallery.

var photos = [{
    'src': '1.jpg',
    'ratio': 0.6645454545454546
    },{
    'src': '2.jpg',
    'ratio': 0.6645454545454546
    },{
    'src': '13.jpg',
    'ratio': 0.6645454545454546
    },
    ...
];

4. Initialize the photo gallery.

$.fn.perfectLayout = function (photos) {
  var node = this;
  var perfectRows = perfectLayout(photos, $(this).width(), $(window).height(), { margin: 2 });
  node.empty();
  perfectRows.forEach(function (row) {
      row.forEach(function (img) {
          var imgNode = $('<div class="image"></div>');
          imgNode.css({
              'width': img.width + 'px',
              'height': img.height + 'px',
              'background': 'url(' + img.src + ')',
              'background-size': 'cover'
          });
          node.append(imgNode);
      });
  });
};

$(document).ready(function () {
  var gallery = $('#gallery');
  gallery.perfectLayout(photos);
  $(window).resize(function () {
      gallery.perfectLayout(photos);
  });
  $(window).trigger('resize');
});

---

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