Create justified image layouts like Google Images and Flickr.

• No dependencies
• 12kb (without gZip)
• CSS Animations

Demo

View

Install

If you're not using NPM then you can download the files from this repo.

NPM

npm install bricks-layout --save-dev

Setup

Markup

<div class="bricks">
	<img src="path/to/image.jpg">
	<img src="path/to/image.jpg">
	<img src="path/to/image.jpg">
	<img src="path/to/image.jpg">
</div>

Link to CSS

<link rel="stylesheet" href="build/css/bricks.min.css">

Link to JS

<script src="build/js/bricks.min.js"></script>

Initialize

<script>
	// Select Bricks element in DOM
	var bricksElement = document.querySelector('.bricks');

	// Create instance of Bricks
	var bricksInstance = new Bricks(bricksElement);
</script>

Module Bundler

// Require Bricks module
var Bricks = require('bricks');

// Select Bricks element in DOM
var bricksElement = document.querySelector('.bricks');

// Create instance of Bricks
var bricksInstance = new Bricks(bricksElement);

Options

API

.addNewImages(images)

This method is for adding more images to the Bricks element. You can fire this event on click, scroll, resize, etc...

Example:

// Array of image paths
var imageSources = ['images/1.jpg', 'images/2.jpg', 'images/3.jpg'];

// Call method on Bricks instance
bricksInstance.addNewImages(imageSources);

.removeImages(images)

This method is for removing images from the Bricks element. You can fire this event on click, scroll, resize, etc...

Example:

// Nodelist of images
var imageNodes = document.querySelectorAll('.bricks__img');

// Array of images to remove
var imagesToRemove = [imageNodes[2], imageNodes[5], imageNodes[9]];

// Call method on Bricks instance
bricksInstance.removeImages(imagesToRemove);

.reloadImages()

This method reloads all of the images in the Bricks element. Note: The images are fully reloading/downloading, not just re-animating.

Example:

bricksInstance.reloadImages();

CSS Animation

The animation that plays after an image loads is easily customizable in the bricks.css or bricks.scss file. Simply set the starting point properties on the bricks__img class and define the end point properties in the bricks-animtion keyframe animation.

Links

If you want the images to be links you can set the imageContainer option to 'a'. In your markup you can specify a data-href attribute on the image and that will be used as the href value in the anchor tag.

<img class="bricks__img" data-href="https://somewebsite.io" src="https://unsplash.it/520/350?image=888" />

Browser Support

• Chrome
• Firefox
• Safari
• IE 10+
• Edge

Credits

• ptgamr for creating the google-image-layout algorithm
• David Desandro for ImagesLoaded
• Unsplash for the awesome images

License

MIT License

MIT © 2016 Arjan Jassal