A tiny modern Masonry alternative, created with CSS3 flexbox + pure javascript. Based on an elegant idea by Tobias Bjerrome Ahlin.
- Pure CSS3 flexbox layout + a bit of javascript. Number of columns is determined by item width via CSS.
- Dependency-free. Written in pure javascript.
- Grid items stay untouched. No removing/adding DOM elements except separators.
- No possible issues with absolutely positioned grid items, because it's a flexbox layout as is.
- Add a link to the css file in the
<head>tag of your index.html:
<link rel="stylesheet" href="assets/brickolage.build.css">- Insert before your closing
<body>tag:
<script src="assets/brickolage.build.js"></script>- Add markup to your index.html:
<ul class="brickolage--container">
<li class="brickolage--item">
...
</li>
<li class="brickolage--item">
...
</li>
<li class="brickolage--item">
...
</li>
</ul>- Initialize script in your app.js:
var fire = function() {
var brcklg = new Brickolage();
}
( document.readyState === "complete" || ( document.readyState !== "loading" && ! document.documentElement.doScroll ) ) && fire() || document.addEventListener( "DOMContentLoaded", fire );| Option | Description |
|---|---|
| container | Specify selector or element. Default: ".brickolage--container" |
| item | Specify selector or elements (HTMLCollection). Default: ".brickolage--item" |
| separatorClassName | Column separator className. Default: "brickolage--separator" |
| separatorTagName | Column separator tagName. Default: "li" |
| originalOrder | Determines order style. Default: false |
Be careful when changing default container, item and separatorClassName options, because of core styles.
Specify script options:
new Brickolage( {
container: "[data-brickolage]",
originalOrder: true
} );| Method | Description |
|---|---|
| reLayout | Use to quickly update container height and items order. |
| reFresh | Trigger after the items were added or removed. Accepts new options. |
| destroy | Return elements to pre-initialized state. Callback function returns destroyed instance. |
Call method after initialization:
brcklg.Method();- Linting
MIT