lays.js

Lays.js

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+.

Live: https://enkot.github.io/lays.js/

Example usage you can see in the Docs folder:

• basic.html - Live
• loaded.html - Live

How to Install

Install, using NPM:

$ npm install lays.js --save

Include

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>

How to Use

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();

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.

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.

const item = document.createElement('div');
lays.add(item);

render()

Render all items, added before.

lays.render();

License

MIT. © 2017 Taras Batenkov