Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/enkot/lays.js
Tiny masonry layout library.
https://github.com/enkot/lays.js
grid javascript layout masonry
Last synced: about 5 hours ago
JSON representation
Tiny masonry layout library.
- Host: GitHub
- URL: https://github.com/enkot/lays.js
- Owner: enkot
- Created: 2017-09-12T13:40:03.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-07-22T18:54:23.000Z (over 6 years ago)
- Last Synced: 2024-11-11T17:48:13.829Z (8 days ago)
- Topics: grid, javascript, layout, masonry
- Language: JavaScript
- Homepage: https://enkot.github.io/lays.js/
- Size: 142 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Lays.js
Tiny cascading grid layout library. [Masonry](https://github.com/desandro/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+.
#### Live: https://enkot.github.io/lays.js/
Example usage you can see in the [Docs](https://github.com/enkot/lays.js/tree/master/docs) folder:
- [basic.html](https://github.com/enkot/lays.js/tree/master/docs/basic.html) - [Live](https://enkot.github.io/lays.js/basic.html)
- [loaded.html](https://github.com/enkot/lays.js/tree/master/docs/loaded.html) - [Live](https://enkot.github.io/lays.js/loaded.html)
## How to Install
Install, using NPM:
```sh
$ npm install lays.js --save
```
### Include
As Node.js/Webpack/Browserify module:
```javascript
import Lays from 'lays.js'
```
In browser:
```html
```
## How to Use
Just call it with your element:
```html
...
...
...
...
```
Create masonry layout with existing items and add new item to the end:
```javascript
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:
```javascript
const masonry = document.getElementById("masonry");
const lays = Lays({
parent: masonry,
prependItems: true,
maxItems: 4,
});
const newItem = document.createElement('div');
lays.add(newItem);
lays.render();
```
## Options
#### prependItems
Add new items before or after all items.
#### maxItems
Set maximum number of items which should be rendered.
#### breakpoints
Set number of columns for each container size.
### Example
Default values.
```javascript
const lays = Lays({
parent: masonry,
prependItems: false,
maxItems: Infinity,
breakpoints: {
540: 2,
720: 3,
1024: 4,
1280: 5,
},
});
```
## API methods
After you have created Lays object, this methods become available:
#### add(element)
Add element as new item.
```javascript
const item = document.createElement('div');
lays.add(item);
```
#### render()
Render all items, added before.
```javascript
lays.render();
```
[](http://forthebadge.com)
## License
MIT. © 2017 Taras Batenkov