본문으로 건너뛰기
버전: 4.12.0

InfiniteGrid

class InfiniteGrid extends Component

콘텐츠가 있는 아이템을 레이아웃 타입에 따라 무한으로 배치하는 모듈. 다양한 크기의 아이템을 다양한 레이아웃으로 배치할 수 있다. 아이템의 개수가 계속 늘어나도 모듈이 처리하는 DOM의 개수를 일정하게 유지해 최적의 성능을 보장한다

constructor

new InfiniteGrid(wrapper, options)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
wrapperHTMLElement | string모듈을 적용할 기준 엘리먼트
optionsOptionseg.InfiniteGrid 모듈의 옵션 객체
<ul id="grid">
<li class="card">
<div>test1</div>
</li>
<li class="card">
<div>test2</div>
</li>
<li class="card">
<div>test3</div>
</li>
<li class="card">
<div>test4</div>
</li>
<li class="card">
<div>test5</div>
</li>
<li class="card">
<div>test6</div>
</li>
</ul>
<script>
import { MasonryInfiniteGrid } from "@egjs/infinitegrid";
var some = new MasonryInfiniteGrid("#grid").on("renderComplete", function(e) {
// ...
});
// If you already have items in the container, call "layout" method.
some.renderItems();
</script>

Methods

renderItems

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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
optionsRenderOptions✔️{}렌더링을 하기 위한 옵션.
import { MasonryInfiniteGrid } from "@egjs/infinitegrid";
const grid = new MasonryInfiniteGrid();

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

getWrapperElement

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

getScrollContainerElement

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

getContainerElement

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

syncItems

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

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsInfiniteGridItemInfo[]렌더링을 하기 위한 옵션.

setCursors

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

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
startCursornumber보이는 그룹의 첫번째 index.
endCursornumber보이는 그룹의 마지막 index.
useFirstRenderboolean✔️첫 렌더링이 이미 되어있는지 여부.

getStartCursor

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

Returns: number

getEndCursor

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

Returns: number

append

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

Returns: this

  • 모듈 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsInfiniteGridInsertedItems추가할 아이템들
groupKeystring | 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

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

Returns: this

  • 모듈 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsInfiniteGridInsertedItems추가할 아이템들
groupKeystring | 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

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

Returns: this

  • 모듈 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
indexnumber추가하기 위한 index
itemsInfiniteGridInsertedItems추가할 아이템들
groupKeystring | 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

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

Returns: this

  • 모듈 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
groupIndexnumber추가하기 위한 group의 index
itemsInfiniteGridInsertedItems추가할 아이템들
groupKeystring | 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

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

Returns: InfiniteGridStatus

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

setPlaceholder

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

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
infoPartial<InfiniteGridItemStatus> | nullplaceholder의 status

setLoading

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

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
infoPartial<InfiniteGridItemStatus> | nullplaceholder의 status

appendPlaceholders

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

Returns: InsertedPlaceholdersResult

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsnumber | InfiniteGridItemStatus[]placeholder에 해당하는 아이템들. 숫자면 갯수만큼 복제를 한다.
groupKeystring | number✔️추가할 아이템에 설정할 그룹 키. 생략하면 값이 자동으로 생성된다.

prependPlaceholders

placeholder들을 처음에 추가한다.

Returns: InsertedPlaceholdersResult

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsnumber | InfiniteGridItemStatus[]placeholder에 해당하는 아이템들. 숫자면 갯수만큼 복제를 한다.
groupKeystring | number✔️추가할 아이템에 설정할 그룹 키. 생략하면 값이 자동으로 생성된다.

removePlaceholders

placeholder들을 삭제한다.

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

setStatus

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

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
statusInfiniteGridStatusInfiniteGrid 모듈의 status 객체.
useFirstRenderboolean✔️첫 렌더링이 이미 되어있는지 여부.

removeGroupByIndex

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

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
indexnumber

removeGroupByKey

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

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
keynumber | string

removeByIndex

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

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
indexnumber

removeByKey

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

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
keystring | number

updateItems

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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsInfiniteGridItem[]✔️업데이트할 아이템들.
optionsRenderOptions✔️{}렌더링을 하기 위한 옵션.

getItems

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

Returns: InfiniteGridItem[]

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
includePlaceholdersboolean✔️placeholder에 해당하는 아이템들을 포함할지 여부.

getVisibleItems

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

Returns: InfiniteGridItem[]

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
includePlaceholdersboolean✔️placeholder에 해당하는 아이템들을 포함할지 여부.

getRenderingItems

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

Returns: InfiniteGridItem[]

getGroups

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

Returns: InfiniteGridGroup[]

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
includePlaceholdersboolean✔️placeholder에 해당하는 그룹들을 포함할지 여부.

getVisibleGroups

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

Returns: InfiniteGridGroup[]

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
includePlaceholdersboolean✔️placeholder에 해당하는 그룹들을 포함할지 여부.

wait

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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
direction"start" | "end"✔️DIRECTION.END데이터를 추가하기 위한 방향.

ready

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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
hasNoDataboolean✔️데이터가 존재하지 않으면 loading bar를 즉시 제거 한다.

isWait

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

destroy

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

Returns: void

trigger

inherited

커스텀 이벤트를 발생시킨다

Returns: this

  • 컴포넌트 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventstring | ComponentEvent발생할 커스텀 이벤트의 이름 또는 ComponentEvent의 인스턴스
paramsArray<any> | $ts:...커스텀 이벤트가 발생할 때 전달할 데이터
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

이벤트가 한번만 실행된다.

Returns: this

  • 컴포넌트 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트
handlerToAttachfunction | $ts:...✔️등록할 이벤트의 핸들러 함수
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

컴포넌트에 이벤트가 등록됐는지 확인한다.

Returns: boolean

  • 이벤트 등록 여부
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring등록 여부를 확인할 이벤트의 이름
import Component from "@egjs/component";

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

on

inherited

컴포넌트에 이벤트를 등록한다.

Returns: this

  • 컴포넌트 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트
handlerToAttachfunction | $ts:...✔️등록할 이벤트의 핸들러 함수
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

컴포넌트에 등록된 이벤트를 해제한다.
eventName이 주어지지 않았을 경우 모든 이벤트 핸들러를 제거한다.
handlerToAttach가 주어지지 않았을 경우 eventName에 해당하는 모든 이벤트 핸들러를 제거한다.

Returns: this

  • 컴포넌트 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...✔️해제할 이벤트의 이름
handlerToDetachfunction | $ts:...✔️해제할 이벤트의 핸들러 함수
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

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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eInfiniteGrid.OnChangeScroll이벤트에 전달되는 데이터 객체

requestAppend

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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eInfiniteGrid.OnRequestAppend이벤트에 전달되는 데이터 객체

requestPrepend

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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eInfiniteGrid.OnRequestPrepend이벤트에 전달되는 데이터 객체

contentError

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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eInfiniteGrid.OnContentError이벤트에 전달되는 데이터 객체

renderComplete

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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eInfiniteGrid.OnRenderComplete이벤트에 전달되는 데이터 객체