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.
Type Name Latest commit message Commit time
Failed to load latest commit information.

#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.


/* 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.