Skip to main content
Version: 4.10.1

PackingInfiniteGrid

class PackingInfiniteGrid

The PackingInfiniteGrid is a grid that shows the important items bigger without sacrificing the weight of the items.
Rows and columns are separated so that items are dynamically placed within the horizontal and vertical space rather than arranged in an orderly fashion.
If sizeWeight is higher than ratioWeight, the size of items is preserved as much as possible.
Conversely, if ratioWeight is higher than sizeWeight, the ratio of items is preserved as much as possible.

constructor

new PackingInfiniteGrid(container, options)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
containerHTMLElement | string

A base element for a module

optionsPackingInfiniteGridOptions

The option object of the PackingInfiniteGrid module

Methods

renderItems

inherited

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

inherited

Returns the wrapper element specified by the user.

getScrollContainerElement

inherited

Returns the container element corresponding to the scroll area.

getContainerElement

inherited

Returns the container element containing item elements.

syncItems

inherited

When items change, it synchronizes and renders items.

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsInfiniteGridItemInfo[]

Options for rendering.

setCursors

inherited

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

inherited

Returns the first index of visible groups.

Returns: number

getEndCursor

inherited

Returns the last index of visible groups.

Returns: number

append

inherited

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

inherited

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

inherited

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]);

insertByGroupIndex

inherited

Add items based on group index.

Returns: this


    • An instance of a module itself

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
groupIndexnumber

group 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.insertByGroupIndex(2, `<div class="item">test1</div><div class="item">test2</div>`);
ig.insertByGroupIndex(3, [`<div class="item">test1</div>`, `<div class="item">test2</div>`]);
ig.insertByGroupIndex(4, [HTMLElement1, HTMLElement2]);

getStatus

inherited

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.

includePlaceholdersboolean✔️

Whether to include items corresponding to placeholders.

setPlaceholder

inherited

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

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
infoPartial<InfiniteGridItemStatus> | null

The placeholder status.

setLoading

inherited

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

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
infoPartial<InfiniteGridItemStatus> | null

The placeholder status.

appendPlaceholders

inherited

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

inherited

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

inherited

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

inherited

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

inherited

Removes the group corresponding to index.

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
indexnumber

removeGroupByKey

inherited

Removes the group corresponding to key.

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
keynumber | string

removeByIndex

inherited

Removes the item corresponding to index.

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
indexnumber

removeByKey

inherited

Removes the item corresponding to key.

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
keystring | number

updateItems

inherited

Update the size of the items and render them.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsInfiniteGridItem[]✔️

Items to be updated.

optionsRenderOptions✔️{}

Options for rendering.

getItems

inherited

Return all items of InfiniteGrid.

Returns: InfiniteGridItem[]

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
includePlaceholdersboolean✔️

Whether to include items corresponding to placeholders.

getVisibleItems

inherited

Return visible items of InfiniteGrid.

Returns: InfiniteGridItem[]

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
includePlaceholdersboolean✔️

Whether to include items corresponding to placeholders.

getRenderingItems

inherited

Return rendering items of InfiniteGrid.

Returns: InfiniteGridItem[]

getGroups

inherited

Return all groups of InfiniteGrid.

Returns: InfiniteGridGroup[]

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
includePlaceholdersboolean✔️

Whether to include groups corresponding to placeholders.

getVisibleGroups

inherited

Return visible groups of InfiniteGrid.

Returns: InfiniteGridGroup[]

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
includePlaceholdersboolean✔️

Whether to include groups corresponding to placeholders.

wait

inherited

Set to wait to request data.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
direction"start" | "end"✔️DIRECTION.END

direction in which data will be added.

ready

inherited

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

isWait

inherited

Returns whether it is set to wait to request data.

destroy

inherited

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

Returns: void

Events

changeScroll

inherited

This event is fired when scrolling.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eInfiniteGrid.OnChangeScroll

The object of data to be sent to an event

requestAppend

inherited

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

inherited

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

inherited

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

inherited

This event is fired when the InfiniteGrid has completed rendering.

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eInfiniteGrid.OnRenderComplete

The object of data to be sent to an event