Create justified image layouts like Google Images and Flickr.
- No dependencies
- 12kb (without gZip)
- CSS Animations
If you're not using NPM then you can download the files from this repo.
npm install bricks-layout --save-dev
<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 rel="stylesheet" href="build/css/bricks.min.css">
<script src="build/js/bricks.min.js"></script>
<script>
// Select Bricks element in DOM
var bricksElement = document.querySelector('.bricks');
// Create instance of Bricks
var bricksInstance = new Bricks(bricksElement);
</script>
// 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);
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. |
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);
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);
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();
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.
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" />
- Chrome
- Firefox
- Safari
- IE 10+
- Edge
- ptgamr for creating the google-image-layout algorithm
- David Desandro for ImagesLoaded
- Unsplash for the awesome images
MIT ยฉ 2016 Arjan Jassal