digitalmamkin / bricks

Create justified image layouts like Google Images and Flickr.

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

Name	Type	Default	Description
afterLoad	function		A callback function that is fired after the images are loaded and resized.
animation	boolean	true	If true, the images will animate after they load.
animationDelay	number	50	In milliseconds, the delay between the animation of each image.
beforeLoad	function		A callback function that is fired before the images are loaded or resized.
imageClassName	string	bricks__img	The class name that tells Bricks that the image is part of the layout.
imageContainer	string	div	The element that the images will be wrapped in, e.g: 'div', or 'span'.
imageContainerClassName	string	bricks__img	The class name of the element that the images will be wrapped.
imageLoadedClassName	string	bricks__img--loaded	The class name applied to the image when it is finished loading.
margin	number	0	The horizontal space between each image.
maxHeight	number	250	The maximum height for a row of images.

API

.addNewImages(images)

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

Argument Name	Type	Description
images	array	An array of strings. The strings should be the `src` attribute for the image.

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

Argument Name	Type	Description
images	array	An array of image nodes.

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