Skip to main content
Version: 4.1.0

InfiniteGrid

class InfiniteGrid extends Component

A module used to arrange items including content infinitely according to layout type. With this module, you can implement various layouts composed of different items whose sizes vary. It guarantees performance by maintaining the number of DOMs the module is handling under any circumstance

Constructor#

new InfiniteGrid(wrapper, options)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
wrapperHTMLElement | string

A base element for a module

optionsOptions

The option object of the InfiniteGrid module

Methods#

renderItems#

Rearrange items to fit the grid and render them. When rearrange is complete, the renderComplete event is fired.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
optionsRenderOptionsโœ”๏ธ{}

Options for rendering.

import { MasonryInfiniteGrid } from "@egjs/infinitegrid";const grid = new MasonryInfiniteGrid();
grid.on("renderComplete", e => {  console.log(e);});grid.renderItems();

getWrapperElement#

Returns the wrapper element specified by the user.

getScrollContainerElement#

Returns the container element corresponding to the scroll area.

getContainerElement#

Returns the container element containing item elements.

syncItems#

When items change, it synchronizes and renders items.

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsInfiniteGridItemInfo[]

Options for rendering.

setCursors#

Change the currently visible groups.

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
startCursornumber

first index of visible groups.

endCursornumber

last index of visible groups.

useFirstRenderbooleanโœ”๏ธ

Whether the first rendering has already been done.

getStartCursor#

Returns the first index of visible groups.

Returns: number

getEndCursor#

Returns the last index of visible groups.

Returns: number

append#

Add items at the bottom(right) of the grid.

Returns: this


    • An instance of a module itself

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsInfiniteGridInsertedItems

items to be added

groupKeystring | numberโœ”๏ธ

The group key to be configured in items. It is automatically generated by default.

ig.append(`<div class="item">test1</div><div class="item">test2</div>`);ig.append([`<div class="item">test1</div>`, `<div class="item">test2</div>`]);ig.append([HTMLElement1, HTMLElement2]);

prepend#

Add items at the top(left) of the grid.

Returns: this


    • An instance of a module itself

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsInfiniteGridInsertedItems

items to be added

groupKeystring | numberโœ”๏ธ

The group key to be configured in items. It is automatically generated by default.

ig.prepend(`<div class="item">test1</div><div class="item">test2</div>`);ig.prepend([`<div class="item">test1</div>`, `<div class="item">test2</div>`]);ig.prepend([HTMLElement1, HTMLElement2]);

insert#

Add items to a specific index.

Returns: this


    • An instance of a module itself

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
indexnumber

index to add

itemsInfiniteGridInsertedItems

items to be added

groupKeystring | numberโœ”๏ธ

The group key to be configured in items. It is automatically generated by default.

ig.insert(2, `<div class="item">test1</div><div class="item">test2</div>`);ig.insert(3, [`<div class="item">test1</div>`, `<div class="item">test2</div>`]);ig.insert(4, [HTMLElement1, HTMLElement2]);

getStatus#

Returns the current state of a module such as location information. You can use the setStatus() method to restore the information returned through a call to this method.

Returns: InfiniteGridStatus

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
typeSTATUS_TYPEโœ”๏ธ

STATUS_TYPE.NOT_REMOVE = Get all information about items. STATUS_TYPE.REMOVE_INVISIBLE_ITEMS = Get information on visible items only. STATUS_TYPE.MINIMIZE_INVISIBLE_ITEMS = Compress invisible items. You can replace it with a placeholder. STATUS_TYPE.MINIMIZE_INVISIBLE_GROUPS = Compress invisible groups.

setPlaceholder#

You can set placeholders to restore status or wait for items to be added.

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
infoPartial<InfiniteGridItemStatus> | null

The placeholder status.

setLoading#

You can set placeholders to restore status or wait for items to be added.

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
infoPartial<InfiniteGridItemStatus> | null

The placeholder status.

appendPlaceholders#

Add the placeholder at the end.

Returns: InsertedPlaceholdersResult

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsnumber | InfiniteGridItemStatus[]

Items that correspond to placeholders. If it is a number, it duplicates the number of copies.

groupKeystring | numberโœ”๏ธ

The group key to be configured in items. It is automatically generated by default.

prependPlaceholders#

Add the placeholder at the start.

Returns: InsertedPlaceholdersResult

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsnumber | InfiniteGridItemStatus[]

Items that correspond to placeholders. If it is a number, it duplicates the number of copies.

groupKeystring | numberโœ”๏ธ

The group key to be configured in items. It is automatically generated by default.

removePlaceholders#

Remove placeholders

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
type"start" | "end" | {groupKey: string | number}

Remove the placeholders corresponding to the groupkey. When "start" or "end", remove all placeholders in that direction.

setStatus#

Sets the status of the InfiniteGrid module with the information returned through a call to the getStatus() method.

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
statusInfiniteGridStatus

status object of the InfiniteGrid module.

useFirstRenderbooleanโœ”๏ธ

Whether the first rendering has already been done.

removeGroupByIndex#

Removes the group corresponding to index.

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
indexnumber

removeGroupByKey#

Removes the group corresponding to key.

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
keynumber | string

removeByIndex#

Removes the item corresponding to index.

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
indexnumber

removeByKey#

Removes the item corresponding to key.

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
keystring | number

updateItems#

Update the size of the items and render them.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsInfiniteGridItem[]โœ”๏ธ

Items to be updated.

optionsRenderOptionsโœ”๏ธ{}

Options for rendering.

getItems#

Return all items of InfiniteGrid.

Returns: InfiniteGridItem[]

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
includePlaceholdersbooleanโœ”๏ธ

Whether to include items corresponding to placeholders.

getVisibleItems#

Return visible items of InfiniteGrid.

Returns: InfiniteGridItem[]

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
includePlaceholdersbooleanโœ”๏ธ

Whether to include items corresponding to placeholders.

getRenderingItems#

Return rendering items of InfiniteGrid.

Returns: InfiniteGridItem[]

getGroups#

Return all groups of InfiniteGrid.

Returns: InfiniteGridGroup[]

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
includePlaceholdersbooleanโœ”๏ธ

Whether to include groups corresponding to placeholders.

getVisibleGroups#

Return visible groups of InfiniteGrid.

Returns: InfiniteGridGroup[]

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
includePlaceholdersbooleanโœ”๏ธ

Whether to include groups corresponding to placeholders.

wait#

Set to wait to request data.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
direction"start" | "end"โœ”๏ธDIRECTION.END

direction in which data will be added.

ready#

When the data request is complete, it is set to ready state.

isWait#

Returns whether it is set to wait to request data.

destroy#

Releases the instnace and events and returns the CSS of the container and elements.

Returns: void

trigger#

inherited

Trigger a custom event.

Returns: this

  • An instance of the component itself

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventstring | ComponentEvent

The name of the custom event to be triggered or an instance of the ComponentEvent

paramsArray<any> | $ts:...

Event data to be sent when triggering a custom event

import Component, { ComponentEvent } from "@egjs/component";
class Some extends Component<{  beforeHi: ComponentEvent<{ foo: number; bar: string }>;  hi: { foo: { a: number; b: boolean } };  someEvent: (foo: number, bar: string) => void;  someOtherEvent: void; // When there's no event argument}> {  some(){    if(this.trigger("beforeHi")){ // When event call to stop return false.      this.trigger("hi");// fire hi event.    }  }}
const some = new Some();some.on("beforeHi", e => {  if(condition){    e.stop(); // When event call to stop, `hi` event not call.  }  // `currentTarget` is component instance.  console.log(some === e.currentTarget); // true
  typeof e.foo; // number  typeof e.bar; // string});some.on("hi", e => {  typeof e.foo.b; // boolean});// If you want to more know event design. You can see article.// https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F

once#

inherited

Executed event just one time.

Returns: this

  • An instance of the component itself

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...

The name of the event to be attached or an event name - event handler mapped object.

handlerToAttachfunction | $ts:...โœ”๏ธ

The handler function of the event to be attached

import Component, { ComponentEvent } from "@egjs/component";
class Some extends Component<{  hi: ComponentEvent;}> {  hi() {    alert("hi");  }  thing() {    this.once("hi", this.hi);  }}
var some = new Some();some.thing();some.trigger(new ComponentEvent("hi"));// fire alert("hi");some.trigger(new ComponentEvent("hi"));// Nothing happens

hasOn#

inherited

Checks whether an event has been attached to a component.

Returns: boolean

  • Indicates whether the event is attached.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring

The name of the event to be attached

import Component from "@egjs/component";
class Some extends Component<{  hi: void;}> {  some() {    this.hasOn("hi");// check hi event.  }}

on#

inherited

Attaches an event to a component.

Returns: this

  • An instance of a component itself

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...

The name of the event to be attached or an event name - event handler mapped object.

handlerToAttachfunction | $ts:...โœ”๏ธ

The handler function of the event to be attached

import Component, { ComponentEvent } from "@egjs/component";
class Some extends Component<{  hi: void;}> {  hi() {    console.log("hi");  }  some() {    this.on("hi",this.hi); //attach event  }}

off#

inherited

Detaches an event from the component.
If the eventName is not given this will detach all event handlers attached.
If the handlerToDetach is not given, this will detach all event handlers for eventName.

Returns: this

  • An instance of a component itself

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...โœ”๏ธ

The name of the event to be detached

handlerToDetachfunction | $ts:...โœ”๏ธ

The handler function of the event to be detached

import Component, { ComponentEvent } from "@egjs/component";
class Some extends Component<{  hi: void;}> {  hi() {    console.log("hi");  }  some() {    this.off("hi",this.hi); //detach event  }}

Events#

changeScroll#

This event is fired when scrolling.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eInfiniteGrid.OnChangeScroll

The object of data to be sent to an event

requestAppend#

The event is fired when scrolling reaches the end or when data for a virtual group is required.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eInfiniteGrid.OnRequestAppend

The object of data to be sent to an event

requestPrepend#

The event is fired when scrolling reaches the start or when data for a virtual group is required.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eInfiniteGrid.OnRequestPrepend

The object of data to be sent to an event

contentError#

The event is fired when scrolling reaches the start or when data for a virtual group is required.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eInfiniteGrid.OnContentError

The object of data to be sent to an event

renderComplete#

This event is fired when the InfiniteGrid has completed rendering.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eInfiniteGrid.OnRenderComplete

The object of data to be sent to an event