InfiniteGrid v3 Options

InfiniteGrid 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

transitionDruation [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.