Masonry DOM effect with pure Typescript / JavaScript
Installation
npm install --save pure-masonryUsage
1. Add pure-masonry.css to you html:
<head>
...
<link rel="stylesheet" href="../node_modules/pure-masonry/pure-masonry.css">
...
</head>or to your css:
@import "./node_modules/pure-masonry/pure-masonry.css";2. Add a container wall to your html body with bricks inside: (The container's size is under your control, feel free to make it absolute (px) or relative (vw, vh, %).)
<div id="wall">
<div class="brick">
...
</div>
<!-- more bricks... -->
</div>3. Import Pure Masonry as an ES module:
import { Mason } from 'pure-masonry';For projects without node module resolution:
import { Mason } from '../node_modules/pure-masonry/pure-masonry.js';4. Initialise with your preferred brick width, gap size between columns and gap size under each brick (all values in px) and with your preferred delay (in ms). The default options are:
{
brickWidth: 300,
horizontalGutter: 15,
verticalGutter: 15,
delay: 750
}E.g. the following code creates 200px wide columns with 10px gutters. Only the last resize within any 500ms period is executed.
<script type="module">
import { Mason } from '../node_modules/pure-masonry/lib/pure-masonry.js';
Mason.grabTrowel({
brickWidth: 200,
horizontalGutter: 10,
verticalGutter: 10,
delay: 500
});
</script>If specified, the container reference in options overrides the default container, #wall:
Mason.grabTrowel({
...options,
container: this.container.nativeElement
});5.
You can turn change detection off and on programmatically by setting Mason.underConstruction to false and true. This prevents the rearrangement of bricks on container resize. In SPAs, you would typically stop watching for changes when the containing component is removed from the DOM:
public ngDestroy(): void {
Mason.underConstruction = false;
}