InfiniteGrid v3.4.7

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
#infinite-scroll #masonry #justified #frame #square #pack #dom-recycle

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
<script src="//naver.github.io/egjs-infinitegrid/release/latest/dist/infinitegrid.pkgd.min.js"></script>
var InfiniteGrid = eg.InfiniteGrid;
var JustifiedLayout = InfiniteGrid.JustifiedLayout;
ES6+
import InfiniteGrid, {JustifiedLayout} from "@egjs/infinitegrid";

Initialize

var ig = new InfiniteGrid("#grid", {
    horizontal: false,
});

// initialize layout
// GridLayout(default), JustifiedLayout, FrameLayout, SquareLayout, PackingLayout
ig.setLayout(JustifiedLayout, {
    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
  normal 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>