InfiniteGrid v3.1.2

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

Showcase

Getting Started

Browser support

IE 8+ (possibly 9 also), latest of Chrome/FF/Safari, iOS 7+ and Android 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.