Tiny cascading grid layout library. Masonry - great library, but has unnecessary code, quite heavy and doesn't have items limit (for example, to show fresh 10 items only). These are the main reasons that led to write a Lays.js.
- Size -> Tiny size (< 2kb)!!
- Dynamic -> Dynamically add new items.
- No dependencies -> No jQuery!
- Browsers support -> IE 9+.
Example usage you can see in the Docs folder:
Install, using NPM:
$ npm install lays.js --save
As Node.js/Webpack/Browserify module:
import Lays from 'lays.js'
In browser:
<script src="https://unpkg.com/lays.js/docs/lays.min.js"></script>
Just call it with your element:
<div id="masonry">
<div class="_laysItem">...</div>
<div class="_laysItem">...</div>
<div class="_laysItem">...</div>
<div class="_laysItem">...</div>
</div>
Create masonry layout with existing items and add new item to the end:
const masonry = document.getElementById("masonry");
const lays = Lays({ parent: masonry });
const newItem = document.createElement('div');
lays.add(newItem);
lays.render();
Will add new item to the beginning and remove last one:
const masonry = document.getElementById("masonry");
const lays = Lays({
parent: masonry,
prependItems: true,
maxItems: 4,
});
const newItem = document.createElement('div');
lays.add(newItem);
lays.render();
Add new items before or after all items.
Set maximum number of items which should be rendered.
Set number of columns for each container size.
Default values.
const lays = Lays({
parent: masonry,
prependItems: false,
maxItems: Infinity,
breakpoints: {
540: 2,
720: 3,
1024: 4,
1280: 5,
},
});
After you have created Lays object, this methods become available:
Add element as new item.
const item = document.createElement('div');
lays.add(item);
Render all items, added before.
lays.render();
MIT. © 2017 Taras Batenkov