Getting Started
Browser support
| Internext Explorer | Chrome | Firefox | Safari | IOS | Android |
|---|---|---|---|---|---|
| 8+ (possibly 9 also) | Yes | Yes | Yes | 7+ | 2.1+ (except 3.x) |
Quick steps to use:
Set up your HTML
<ul id="grid">
<li class="card">
<div>test1</div>
</li>
<li class="card">
<div>test2</div>
</li>
<li class="card">
<div>test3</div>
</li>
....
</ul>
Load files or import library
ES5
// All (Packaged): 64.7kb
<script src="//naver.github.io/egjs-infinitegrid/release/latest/dist/infinitegrid.pkgd.min.js"></script>
// GridLayout: 53.4kb
<script src="//naver.github.io/egjs-infinitegrid/release/latest/dist/infinitegrid.gridlayout.min.js"></script>
// JustifiedLayout: 54.7kb
<script src="//naver.github.io/egjs-infinitegrid/release/latest/dist/infinitegrid.justifiedlayout.min.js"></script>
// FrameLayout: 54kb
<script src="//naver.github.io/egjs-infinitegrid/release/latest/dist/infinitegrid.framelayout.min.js"></script>
// SquareLayout: 55.6kb
<script src="//naver.github.io/egjs-infinitegrid/release/latest/dist/infinitegrid.squarelayout.min.js"></script>
// PackingLayout: 54.3kb
<script src="//naver.github.io/egjs-infinitegrid/release/latest/dist/infinitegrid.packinglayout.min.js"></script>
var InfiniteGrid = eg.InfiniteGrid;
var GridLayout = InfiniteGrid.GridLayout;
ES6+
import InfiniteGrid, {GridLayout} from "@egjs/infinitegrid";
Initialize
var ig = new InfiniteGrid("#grid", {
horizontal: false,
});
// initialize layout
// GridLayout, JustifiedLayout, FrameLayout, SquareLayout, PackingLayout
ig.setLayout(GridLayout, {
itemSize: 200,
});
For more information about API, please visit the link.
Layouts
InfiniteGrid offers five layouts. You can place items with the layout.
GridLayout
GridLayout is a layout in which images with the same width are arranged in a staggered arrangement, like a stack of bricks. Adjust the width of all images to the same size, find the lowest height column, and insert a new image.
JustifiedLayout
\'justified\' is a printing term with the meaning that 'it fits in one row wide'. JustifiedLayout is a layout in which the image is filled up on the basis of a line given a width in the meaning of the term.
FrameLayout
FrameLayout is a layout that allows you to place items in a given frame. It is a layout that corresponds to a level intermediate between the placement of the image directly by the designer and the layout using the algorithm.
SquareLayout
SquareLayout aligns the grid with all the images in a square like a checkerboard, and the important image is displayed by enlarging the size N times. The main image can be enlarged, and then a small image can be placed to naturally show the relationship of the image.
PackingLayout
PackingLayout show important images bigger without sacrificing the inherent size of the image. Rows and columns are separated so that images are dynamically placed within the horizontal and vertical space rather than arranged in an orderly fashion.
Options
A module used to arrange card elements including content infinitely according to layout type. With this module, you can implement various layouts composed of different card elements whose sizes vary. It guarantees performance by maintaining the number of DOMs the module is handling under any circumstance
<div class="app">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
</div>
const ig = new eg.InfiniteGrid(".app", {
isConstantSize: true,
transitionDuration: 0.2,
});
ig.setLayout(eg.InfiniteGrid.GridLayout, {align: "center", margin: 3});
ig.layout(true);
itemSelector [default=”*”]
A selector to select card elements that make up the layout
useRecycle [default=true]
Indicates whether keep the number of DOMs is maintained. If the useRecycle value is ‘true’, keep the number of DOMs is maintained. If the useRecycle value is ‘false’, the number of DOMs will increase as card elements are added.
| useRecycle(true) | useRecycle(false) |
|---|---|
 |
 |
isOverflowScroll [default=false]
Indicates whether overflow:scroll is applied
horizontal [default=false]
Direction of the scroll movement (true: horizontal, false: vertical)
| horizontal(true) | horizontal(false) |
|---|---|
 |
 |
useFit [default=true]
The useFit option scrolls upwards so that no space is visible until an item is added
isEqualSize [default=false]
Indicates whether sizes of all card elements are equal to one another. If sizes of card elements to be arranged are all equal and this option is set to “true”, the performance of layout arrangement can be improved.
isConstantSize [default=false]
Indicates whether sizes of all card elements does not change, the performance of layout arrangement can be improved.
| None | isEqualSize | isConstantSize | |
|---|---|---|---|
 |
 |
 |
|
| Performance boost | X | O | O |
| Variable Size | O | O | X |
| Constant Size | X | X | O |
| Block Error | Error | X | X |
transitionDuration [default=0]
Indicates how many seconds a transition effect takes to complete.
threshold [default=100]
The threshold size of an event area where card elements are added to a layout.
attributePrefix [default=”data-“]
The prefix to use element’s data attribute.
Components
@egjs/react-layout
A react component that can easily use egjs-infinitegrid’s layouts
Install
$ npm install @egjs/react-layout --save
How to use
import {GridLayout, JustifiedLayout, FrameLayout, SquareLayout, PackingLayout} from "@egjs/react-layout";
<GridLayout tag="div" size="1000" horizontal={true} margin="10" isEqualSize={false} outline={[]}>
<div className="item"></div>
<div className="item"></div>
<div className="item"></div>
<div className="item"></div>
<div className="item"></div>
<div className="item"></div>
</GridLayout>
@egjs/react-infinitegrid
A react component that can easily use egjs-infinitegrid
Install
$ npm install @egjs/react-infinitegrid --save
How to use
// GridLayout, JustifiedLayout, FrameLayout, SquareLayout, PackingLayout
import {GridLayout, JustifiedLayout, FrameLayout, SquareLayout, PackingLayout} from "@egjs/react-layout";
<GridLayout
tag="div"
threshold={100}
isOverflowScroll={false}
isEqualSize={false}
isConstantSize={false}
useFit={true}
useRecycle={true}
horizontal={false}
percentage={false}
onAppend={e => append}
onPrepend={e => append}
onLayoutComplete={e => layoutComplete}
onImageError={e => imageError}
onChange={e => chnage}>
<Item groupKey={0} key={0}/>
<Item groupKey={0} key={1}/>
<Item groupKey={1} key={2}/>
<Item groupKey={1} key={3}/>
<Item groupKey={2} key={4}/>
<Item groupKey={2} key={5}/>
<Item groupKey={2} key={6}/>
</GridLayout>