버전: 4.10.1

JustifiedInfiniteGrid

class JustifiedInfiniteGrid

'justified'는 '1행의 너비에 맞게 꼭 들어찬'이라는 의미를 가진 인쇄 용어다. JustifiedInfiniteGrid는 용어의 의미대로 너비가 주어진 사이즈를 기준으로 아이템가 가득 차도록 배치하는 Grid다.
아이템 엘리먼트에 'data-grid-inline-offset' 또는 'data-grid-content-offset'를 설정하면 offset 값을 제외하고 비율을 유지한다.
비율을 유지하고 싶은 엘리먼트에 'data-grid-maintained-target'을 설정한다면 해당 엘리먼트의 비율을 유지하면서 아이템이 렌더링이 된다.

constructor

new JustifiedInfiniteGrid(container, options)

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
container	HTMLElement \| string			모듈을 적용할 기준 엘리먼트
options	JustifiedInfiniteGridOptions			JustifiedInfiniteGrid 모듈의 옵션 객체

Methods

renderItems

inherited

grid에 맞게 아이템을 재배치하고 렌더링을 한다. 배치가 완료되면 renderComplete 이벤트가 발생한다.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
options	RenderOptions	✔️	{}	렌더링을 하기 위한 옵션.

import { MasonryInfiniteGrid } from "@egjs/infinitegrid";
const grid = new MasonryInfiniteGrid();

grid.on("renderComplete", e => {
  console.log(e);
});
grid.renderItems();

getWrapperElement

inherited

컨테이너 엘리먼트를 반환한다.

getScrollContainerElement

inherited

스크롤 영역에 해당하는 컨테이너 엘리먼트를 반환한다.

getContainerElement

inherited

아이템 엘리먼트들을 담긴 컨테이너 엘리먼트를 반환한다.

syncItems

inherited

items가 바뀐 경우 동기화를 하고 렌더링을 한다.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	InfiniteGridItemInfo[]			렌더링을 하기 위한 옵션.

setCursors

inherited

현재 보이는 그룹들을 바꾼다.

Returns: this

PARAMETER	TYPE	OPTIONAL	DESCRIPTION
startCursor	number		보이는 그룹의 첫번째 index.
endCursor	number		보이는 그룹의 마지막 index.
useFirstRender	boolean	✔️	첫 렌더링이 이미 되어있는지 여부.

getStartCursor

inherited

보이는 그룹들의 첫번째 index를 반환한다.

Returns: number

getEndCursor

inherited

보이는 그룹들의 마지막 index를 반환한다.

Returns: number

append

inherited

아이템들을 grid 아래(오른쪽)에 추가한다.

Returns: this

모듈 자신의 인스턴스

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	InfiniteGridInsertedItems			추가할 아이템들
groupKey	string \| number	✔️		추가할 아이템에 설정할 그룹 키. 생략하면 값이 자동으로 생성된다.

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

아이템들을 grid 위(왼쪽)에 추가한다.

Returns: this

모듈 자신의 인스턴스

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	InfiniteGridInsertedItems			추가할 아이템들
groupKey	string \| number	✔️		추가할 아이템에 설정할 그룹 키. 생략하면 값이 자동으로 생성된다.

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

아이템들을 특정 index에 추가한다.

Returns: this

모듈 자신의 인스턴스

PARAMETER	TYPE	OPTIONAL	DESCRIPTION
index	number		추가하기 위한 index
items	InfiniteGridInsertedItems		추가할 아이템들
groupKey	string \| number	✔️	추가할 아이템에 설정할 그룹 키. 생략하면 값이 자동으로 생성된다.

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

group의 index 기준으로 item들을 추가한다.

Returns: this

모듈 자신의 인스턴스

PARAMETER	TYPE	OPTIONAL	DESCRIPTION
groupIndex	number		추가하기 위한 group의 index
items	InfiniteGridInsertedItems		추가할 아이템들
groupKey	string \| number	✔️	추가할 아이템에 설정할 그룹 키. 생략하면 값이 자동으로 생성된다.

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

아이템의 위치 정보 등 모듈의 현재 상태 정보를 반환한다. 이 메서드가 반환한 정보를 저장해 두었다가 setStatus() 메서드로 복원할 수 있다

Returns: InfiniteGridStatus

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
type	STATUS_TYPE	✔️		STATUS_TYPE.NOT_REMOVE = 모든 아이템들의 정보를 가져온다. STATUS_TYPE.REMOVE_INVISIBLE_ITEMS = 보이는 아이템들의 정보만 가져온다. STATUS_TYPE.MINIMIZE_INVISIBLE_ITEMS = 안보이는 아이템들을 압축한다. placeholder로 대체가 가능하다. STATUS_TYPE.MINIMIZE_INVISIBLE_GROUPS = 안보이는 그룹을 압축한다.
includePlaceholders	boolean	✔️		placeholder에 해당하는 아이템들을 포함할지 여부.

setPlaceholder

inherited

status 복구 또는 아이템 추가 대기를 위한 placeholder를 설정할 수 있다.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
info	Partial<InfiniteGridItemStatus> \| null			placeholder의 status

setLoading

inherited

status 복구 또는 아이템 추가 대기를 위한 placeholder를 설정할 수 있다.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
info	Partial<InfiniteGridItemStatus> \| null			placeholder의 status

appendPlaceholders

inherited

placeholder들을 마지막에 추가한다.

Returns: InsertedPlaceholdersResult

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	number \| InfiniteGridItemStatus[]			placeholder에 해당하는 아이템들. 숫자면 갯수만큼 복제를 한다.
groupKey	string \| number	✔️		추가할 아이템에 설정할 그룹 키. 생략하면 값이 자동으로 생성된다.

prependPlaceholders

inherited

placeholder들을 처음에 추가한다.

Returns: InsertedPlaceholdersResult

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	number \| InfiniteGridItemStatus[]			placeholder에 해당하는 아이템들. 숫자면 갯수만큼 복제를 한다.
groupKey	string \| number	✔️		추가할 아이템에 설정할 그룹 키. 생략하면 값이 자동으로 생성된다.

removePlaceholders

inherited

placeholder들을 삭제한다.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
type	"start" \| "end" \| {groupKey: string \| number}			groupkey에 해당하는 placeholder들을 삭제한다. "start" 또는 "end" 일 때 해당 방향의 모든 placeholder들을 삭제한다.

setStatus

inherited

getStatus() 메서드가 저장한 정보로 InfiniteGrid 모듈의 상태를 설정한다.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
status	InfiniteGridStatus			InfiniteGrid 모듈의 status 객체.
useFirstRender	boolean	✔️		첫 렌더링이 이미 되어있는지 여부.

removeGroupByIndex

inherited

index에 해당하는 그룹을 제거 한다.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
index	number

removeGroupByKey

inherited

key에 해당하는 그룹을 제거 한다.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
key	number \| string

removeByIndex

inherited

index에 해당하는 아이템을 제거 한다.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
index	number

removeByKey

inherited

key에 해당하는 아이템을 제거 한다.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
key	string \| number

updateItems

inherited

아이템들의 사이즈를 업데이트하고 렌더링을 한다.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	InfiniteGridItem[]	✔️		업데이트할 아이템들.
options	RenderOptions	✔️	{}	렌더링을 하기 위한 옵션.

getItems

inherited

InfiniteGrid의 모든 아이템들을 반환한다.

Returns: InfiniteGridItem[]

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
includePlaceholders	boolean	✔️		placeholder에 해당하는 아이템들을 포함할지 여부.

getVisibleItems

inherited

InfiniteGrid의 보이는 아이템들을 반환한다.

Returns: InfiniteGridItem[]

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
includePlaceholders	boolean	✔️		placeholder에 해당하는 아이템들을 포함할지 여부.

getRenderingItems

inherited

InfiniteGrid의 렌더링 아이템들을 반환한다.

Returns: InfiniteGridItem[]

getGroups

inherited

InfiniteGrid의 모든 그룹들을 반환한다.

Returns: InfiniteGridGroup[]

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
includePlaceholders	boolean	✔️		placeholder에 해당하는 그룹들을 포함할지 여부.

getVisibleGroups

inherited

InfiniteGrid의 보이는 그룹들을 반환한다.

Returns: InfiniteGridGroup[]

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
includePlaceholders	boolean	✔️		placeholder에 해당하는 그룹들을 포함할지 여부.

wait

inherited

데이터를 요청하기 위해 대기 상태로 설정한다.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
direction	"start" \| "end"	✔️	DIRECTION.END	데이터를 추가하기 위한 방향.

ready

inherited

데이터 요청이 끝났다면 준비 상태로 설정한다.

isWait

inherited

데이터를 요청하기 위해 대기 상태로 설정되어 있는지 여부를 반환한다.

destroy

inherited

인스턴스와 이벤트를 해제하고 컨테이너와 엘리먼트들의 CSS를 되돌린다.

Returns: void

Events

changeScroll

inherited

스크롤하면 발생하는 이벤트이다.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
e	InfiniteGrid.OnChangeScroll			이벤트에 전달되는 데이터 객체

requestAppend

inherited

스크롤이 끝에 도달하거나 virtual 그룹에 대한 데이터가 필요한 경우 이벤트가 발생한다.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
e	InfiniteGrid.OnRequestAppend			이벤트에 전달되는 데이터 객체

requestPrepend

inherited

스크롤이 끝에 도달하거나 virtual 그룹에 대한 데이터가 필요한 경우 이벤트가 발생한다.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
e	InfiniteGrid.OnRequestPrepend			이벤트에 전달되는 데이터 객체

contentError

inherited

스크롤이 끝에 도달하거나 virtual 그룹에 대한 데이터가 필요한 경우 이벤트가 발생한다.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
e	InfiniteGrid.OnContentError			이벤트에 전달되는 데이터 객체

renderComplete

inherited

InfiniteGrid가 렌더링이 완료됐을 때 이벤트가 발생한다.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
e	InfiniteGrid.OnRenderComplete			이벤트에 전달되는 데이터 객체

constructor​

Methods​

renderItems​

getWrapperElement​

getScrollContainerElement​

getContainerElement​

syncItems​

setCursors​

getStartCursor​

getEndCursor​

append​

prepend​

insert​

insertByGroupIndex​

getStatus​

setPlaceholder​

setLoading​

appendPlaceholders​

prependPlaceholders​

removePlaceholders​

setStatus​

removeGroupByIndex​

removeGroupByKey​

removeByIndex​

removeByKey​

updateItems​

getItems​

getVisibleItems​

getRenderingItems​

getGroups​

getVisibleGroups​

wait​

ready​

isWait​

destroy​

Events​

changeScroll​

requestAppend​

requestPrepend​

contentError​

renderComplete​

constructor

Methods

renderItems

getWrapperElement

getScrollContainerElement

getContainerElement

syncItems

setCursors

getStartCursor

getEndCursor

append

prepend

insert

insertByGroupIndex

getStatus

setPlaceholder

setLoading

appendPlaceholders

prependPlaceholders

removePlaceholders

setStatus

removeGroupByIndex

removeGroupByKey

removeByIndex

removeByKey

updateItems

getItems

getVisibleItems

getRenderingItems

getGroups

getVisibleGroups

wait

ready

isWait

destroy

Events

changeScroll

requestAppend

requestPrepend

contentError

renderComplete