Creates an image grid (which keeps aspect ratios) automatically with javascript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
images
js
README.md
data.json
index.html

README.md

#Automatic image grid#

This is a small javascript class that generates an image grid similar to the one flickr has. The images will be automatically scaled in order to fit inside a container while preserving the aspect ratio and not being cropped.

Here's a live demo.

There are no third party dependency, everything is written in pure vanilla js.

Usage

/* An array with all the images */
var myImages = [
	{
		image: 'my-first-image.jpg',
		width: '320',
		height: '160'
	}, {
		image: 'my-second-image.jpg',
		width: '640',
		height: '320'
	}, {
		image: 'my-third-image.jpg',
		width: '678',
		height: '678'
	}
];

/* The container where to render the grid */
var myContainer = document.querySelectorAll('.wrapper')[0];

/**
 * @param {array} An array containing all the images
 * @param {element} The container element .
 * @param {int} The start height of each row.
 * @param {int} Border offset. (the right or left side for one item)
 *
 * @return {object}
 */
var myGrid = new BH.ImageGrid(
	myImages, // The images
	myContainer, // The container (we take the width from this element)
	500, // The height we want each row to start from
	10 // How much margin on the images.
);