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
Internext Explorer | Chrome | Firefox | Safari | IOS | Android |
---|---|---|---|---|---|
8+ (possibly 9 also) | Yes | Yes | Yes | 7+ | 2.1+ (except 3.x) |
<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>
// 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;
import InfiniteGrid, {GridLayout} from "@egjs/infinitegrid";
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.
InfiniteGrid offers five layouts. You can place items with the layout.
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.
\'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 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 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 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.
A react component that can easily use egjs-infinitegrid’s layouts
$ npm install @egjs/react-layout --save
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>
A react component that can easily use egjs-infinitegrid
$ npm install @egjs/react-infinitegrid --save
// 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>