brickolage
v1.0.7
Published
A tiny modern Masonry alternative, created with CSS3 flexbox + pure javascript
Downloads
7
Maintainers
yauhen.zadziarkouskiReadme
Brickolage 🧱
A tiny modern Masonry alternative, created with CSS3 Flexbox + vanilla JavaScript. Based on an elegant idea of Tobias Bjerrome Ahlin.
Update 2023: This is a slightly improved version of my own lib.
Demo
Features:
- Dependency-free.- Pure CSS3 Flexbox layout + a little bit of JavaScript. Number of columns is determined by item width via CSS.
- 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.
Setting up
- 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 );Options
| Option | Description | | ------ | ------ | | container | Specify a selector or HTML element. Default: ".brickolage--container" | | item | Specify a selector or HTMLCollection. Default: ".brickolage--item" | | separatorClassName | A column separator className. Default: "brickolage--separator" | | separatorTagName | A column separator tagName. Default: "li" | | originalOrder | Determines the items 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
} );Methods
| Method | Description | | ------ | ------ | | reLayout | Use to quickly update the container height and the items order. | | reFresh | Trigger this method after items were added or removed. Accepts new options. | | destroy | Destroys and cleans up the DOM. Returns elements to pre-initialized state. Callback function returns a destroyed instance. |
Call method after initialization:
brcklg.Method();License
MIT