Author: | e-oj |
---|---|
Views Total: | 5,217 views |
Official Page: | Go to website |
Last Update: | March 3, 2019 |
License: | MIT |
Preview:

Description:
Magic Grid is a lightweight (3kb minified) JavaScript library to generate a dynamic, flexible grid layout using pure JavaScript.
How to use it:
Install & download.
# NPM $ npm install magic-grid --save
Load the minified version of the Magic Grid library in the html document.
<script src="/dist/magic-grid.umd.js"></script>
Create a container to place the grid layout.
<div class="container"> </div>
Create a dynamic grid layout and specify the number of grid items to generate.
let magicGrid = new MagicGrid({ container: "#container", items: 20 }); magicGrid.listen();
Create a static grid layout from existing grid items.
<div class="container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> <div class="item6">6</div> <div class="item7">7</div> <div class="item8">8</div> <div class="item9">9</div> <div class="item10">10</div> </div>
let magicGrid = new MagicGrid({ static: true }); magicGrid.listen();
Set the space between grid items. Default: 25px.
let magicGrid = new MagicGrid({ gutter: 30 })
Set the maximum number of grid items.
let magicGrid = new MagicGrid({ maxColumns: 100 })
Decide whether to append next element to the shortest column.
let magicGrid = new MagicGrid({ useMin: false })
Enable/disable the animation when changing screen size.
let magicGrid = new MagicGrid({ animate: false })
Trigger a repositioning function after new grid items added to the grid layout.
magicGrid.positionItems();
Changelog:
v3.2.3 (03/03/2019)
- Update
v3.2.2 (01/21/2019)
- Allow 0 gutter
v3.2.0 (01/17/2019)
- Position with translate
v3.1.5 (01/16/2019)
- Position with translate
v3.1.4 (01/15/2019)
- get container in getReady function
v3.1.2 (12/27/2018)
- refactor
v3.1.1 (12/27/2018)
- Save column width in setup and positionItems.
v3.1.0 (12/25/2018)
- refactor
v3.0.10 (12/25/2018)
- Throttle window listener. Removed getMax function.
v3.0.8 (11/21/2018)
- modified ready check
11/18/2018
- no top gutter on first row
11/17/2018
- stretch container to grid height
11/15/2018
- Refactor