Skip to main content
Version: 4.12.0

Quick Start

If you don't want to use Infinite's features, use @egjs/grid.

Add the script/CSS to the page.

<!-- https://naver.github.io/egjs-infinitegrid/release/latest/dist/infinitegrid.min.js -->
<script src="https://unpkg.com/@egjs/infinitegrid/dist/infinitegrid.min.js" crossorigin="anonymous"></script>

Or, you can rather import them if you're using a bundler like webpack or rollup.

import { MasonryInfiniteGrid } from "@egjs/infinitegrid";

Then, add some basic HTML layout of InfiniteGrid to your page.

<div class="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>

Then initialize InfiniteGrid instance with JavaScript after.

import { MasonryInfiniteGrid } from "@egjs/infinitegrid";

const ig = new MasonryInfiniteGrid(".wrapper", {
align: "center",
gap: 5,
});

ig.on("requestAppend", e => {
const nextGroupKey = (e.groupKey || 0) + 1;
const length = items.length;

ig.append([
`<div class="item">${length}</div>`,
`<div class="item">${length + 1}</div>`,
`<div class="item">${length + 2}</div>`,
], nextGroupKey);
});
ig.renderItems();