Linear Partitioning Based Photo Gallery with jQuery - Perfect Layout

File Size: 17.7 KB
Views Total: 3095
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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 });
  perfectRows.forEach(function (row) {
      row.forEach(function (img) {
          var imgNode = $('<div class="image"></div>');
              'width': img.width + 'px',
              'height': img.height + 'px',
              'background': 'url(' + img.src + ')',
              'background-size': 'cover'

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

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