Class: JustifiedGrid

Extends

• Grid

Members

columnRangeGrid.JustifiedGrid.JustifiedGridOptions["columnRange"]

The minimum and maximum number of items per line.

한 줄에 들어가는 아이템의 최소, 최대 개수.

Default Value:

• [1, 8]

Example

import { JustifiedGrid } from "@egjs/grid";

const grid = new JustifiedGrid(container, {
  columnRange: [1, 8],
});

grid.columnRange = [3, 6];

defaultDirectionGrid.GridOptions["defaultDirection"]

The default direction value when direction is not set in the render option.

render옵션에서 direction을 미설정시의 기본 방향값.

Default Value:

• "end"

Example

import { MasonryGrid } from "@egjs/grid";

const grid = new MasonryGrid(container, {
  defaultDirection: "end",
});

grid.defaultDirection = "start";

displayedRowGrid.JustifiedGrid.JustifiedGridOptions["displayedRow"]

Maximum number of rows to be counted for container size. You can hide it on the screen by setting overflow: hidden. -1 is not set.

• 컨테이너 크기에 계산될 최대 row 개수. overflow: hidden을 설정하면 화면에 가릴 수 있다. -1은 미설정이다.

Default Value:

• -1

Example

import { JustifiedGrid } from "@egjs/grid";

const grid = new JustifiedGrid(container, {
  displayedRow: -1,
});

grid.displayedRow = 3;

gapGrid.GridOptions["gap"]

Gap used to create space around items.

아이템들 사이의 공간.

Default Value:

• 0

Example

import { MasonryGrid } from "@egjs/grid";

const grid = new MasonryGrid(container, {
  gap: 0,
});

grid.gap = 5;

isCroppedSizeGrid.JustifiedGrid.JustifiedGridOptions["isCroppedSize"]

Whether to crop when the row size is out of sizeRange. If set to true, this ratio can be broken.

• row 사이즈가 sizeRange에 벗어나면 크롭할지 여부. true로 설정하면 비율이 깨질 수 있다.

Default Value:

• false

Example

import { JustifiedGrid } from "@egjs/grid";

const grid = new JustifiedGrid(container, {
  sizeRange: [200, 250],
  isCroppedSize: false,
});

grid.isCroppedSize = true;

outlineLengthGrid.GridOptions["outlineLength"]

The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.

outline의 개수. 아웃라인의 개수가 0이라면 grid의 종류에 따라 계산이 된다.

Default Value:

• 0

Example

import { MasonryGrid } from "@egjs/grid";

const grid = new MasonryGrid(container, {
  outlineLength: 0,
  outlineSize: 0,
});

grid.outlineLength = 3;

outlineSizeGrid.GridOptions["outlineSize"]

The size of the outline. If the outline size is 0, it is calculated according to the grid type.

outline의 사이즈. 만약 outline의 사이즈가 0이면, grid의 종류에 따라 계산이 된다.

Default Value:

• 0

Example

import { MasonryGrid } from "@egjs/grid";

const grid = new MasonryGrid(container, {
  outlineLength: 0,
  outlineSize: 0,
});

grid.outlineSize = 300;

preserveUIOnDestroyGrid.GridOptions["preserveUIOnDestroy"]

Whether to preserve the UI of the existing container or item when destroying.

destroy 시 기존 컨테이너, 아이템의 UI를 보존할지 여부.

Default Value:

• false

Example

import { MasonryGrid } from "@egjs/grid";

const grid = new MasonryGrid(container, {
  preserveUIOnDestroy: false,
});

grid.preserveUIOnDestroy = true;

rowRangeGrid.JustifiedGrid.JustifiedGridOptions["rowRange"]

The minimum and maximum number of rows in a group, 0 is not set.

한 그룹에 들어가는 행의 최소, 최대 개수, 0은 미설정이다.

Default Value:

• 0

Example

import { JustifiedGrid } from "@egjs/grid";

const grid = new JustifiedGrid(container, {
  rowRange: 0,
});

grid.rowRange = [3, 4];

sizeRangeGrid.JustifiedGrid.JustifiedGridOptions["sizeRange"]

The minimum and maximum size by which the item is adjusted. If it is not calculated, it may deviate from the minimum and maximum sizes.

아이템이 조정되는 최소, 최대 사이즈. 계산이 되지 않는 경우 최소, 최대 사이즈를 벗어날 수 있다.

Default Value:

• [0, Infinity]

Example

import { JustifiedGrid } from "@egjs/grid";

const grid = new JustifiedGrid(container, {
  sizeRange: [0, Infinity],
});

grid.sizeRange = [200, 800];

useFitGrid.GridOptions["useFit"]

Whether to move the outline to 0 when the top is empty when rendering. However, if it overflows above the top, the outline is forced to 0. (default: true)

렌더링시 상단이 비어있을 때 아웃라인을 0으로 이동시킬지 여부. 하지만 상단보다 넘치는 경우 아웃라인을 0으로 강제 이동한다. (default: true)

Default Value:

• true

Example

import { MasonryGrid } from "@egjs/grid";

const grid = new MasonryGrid(container, {
  useFit: true,
});

grid.useFit = false;

Methods

inherited abstractapplyGrid(direcion, outline)

Grid.ts, line 40

Apply the CSS rect of items to fit the Grid and calculate the outline.

Grid에 맞게 아이템들의 CSS rect를 적용하고 outline을 계산한다.

• direcion
  Type: "start" | "end"

  The direction to apply the Grid. ("end": start to end, "start": end to start)

  Grid를 적용할 방향. ("end": 시작에서 끝 방향, "start": 끝에서 시작 방향)

• outline
  Type: Array.<number>

  The start outline to apply the Grid.

  Grid를 적용할 시작 outline.

inherited destroy(Options)

Grid.ts, line 308

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

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

• Options (default: {}) optional
  Type: DestroyOptions

  for destroy.

  destory()를 위한 옵션

inherited getChildren(){HTMLElement[]}

Grid.ts, line 120

Returns the children of the container element.

컨테이너 엘리먼트의 children을 반환한다.

Returns:

Type	Description
HTMLElement[]

inherited getComputedOutlineLength(items){number}

Grid.ts, line 299

Get the length corresponding to outline.

outline에 해당하는 length를 가져온다.

• items (default: this.items) optional
  Type: GridItem[]

  Items to get outline length.

  outline length를 구하기 위한 아이템들.

Returns:

Type	Description
number

inherited getComputedOutlineSize(items)

Grid.ts, line 290

Get the inline size corresponding to outline.

outline에 해당하는 inline 사이즈를 구한다.

• items (default: this.items) optional
  Type: GridItem[]

  Items to get outline size.

  outline 사이즈를 구하기 위한 아이템들.

inherited getContainerElement(){HTMLElement}

Grid.ts, line 106

Return Container Element.

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

Returns:

Type	Description
HTMLElement

inherited getContainerInlineSize(){number}

Grid.ts, line 147

Gets the container's inline size. ("width" if horizontal is false, otherwise "height")

container의 inline 사이즈를 가져온다. (horizontal이 false면 "width", 아니면 "height")

Returns:

Type	Description
number

inherited getItems(){GridItem[]}

Grid.ts, line 113

Return items.

아이템들을 반환한다.

Returns:

Type	Description
GridItem[]

inherited getOutlines(){GridOutlines}

Grid.ts, line 154

Returns the outlines of the start and end of the Grid.

Grid의 처음과 끝의 outline을 반환한다.

Returns:

Type	Description
GridOutlines

inherited getStatus(minimize){GridStatus}

Grid.ts, line 240

Returns current status such as item's position, size. The returned status can be restored with the setStatus() method.

아이템의 위치, 사이즈 등 현재 상태를 반환한다. 반환한 상태는 setStatus() 메서드로 복원할 수 있다.

• minimize optional
  Type: boolean

  Whether to minimize the status of the item. (default: false)

  item의 status를 최소화할지 여부. (default: false)

Returns:

Type	Description
GridStatus

inherited renderItems(options)

Grid.ts, line 231

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

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

• options (default: {}) optional
  Type: RenderOptions

  Options for rendering.

  렌더링을 하기 위한 옵션.

Example

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

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

inherited setItems(items){this}

Grid.ts, line 128

Set items.

아이템들을 설정한다.

• items
  Type: GridItem[]

  The items to set.

  설정할 아이템들

Returns:

Type	Description
this

inherited setOutlines(outlines)

Grid.ts, line 162

Set outlines.

아웃라인을 설정한다.

• outlines
  Type: GridOutlines

  The outlines to set.

  설정할 아웃라인.

inherited setStatus(status)

Grid.ts, line 252

Set status of the Grid module with the status returned through a call to the getStatus() method.

getStatus() 메서드에 대한 호출을 통해 반환된 상태로 Grid 모듈의 상태를 설정한다.

• status
  Type: GridStatus

inherited syncElements(options)

Grid.ts, line 171

When elements change, it synchronizes and renders items.

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

• options (default: {}) optional
  Type: RenderOptions

  Options for rendering.

  렌더링을 하기 위한 옵션.

inherited updateItems(items, options)

Grid.ts, line 201

Update the size of the items and render them.

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

• items (default: this.items) optional
  Type: GridItem[]

  Items to be updated.

  업데이트할 아이템들.

• options (default: {}) optional
  Type: RenderOptions

  Options for rendering.

  렌더링을 하기 위한 옵션.

Type Definitions

Grid.JustifiedGrid.JustifiedGridOptionsTSInterface

Properties:

Name	Type	Argument	Default	Description
horizontal	boolean	<optional>	false	Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, inlinePos is left, inlineSize is width, contentPos is top, and contentSize is height. If horizontal is true, inlinePos is top, inlineSize is height, contentPos is left, and contentSize is width. 스크롤 이동 방향. (true: 가로방향, false: 세로방향) horizontal이 false 면 inlinePos는 left, inlineSize는 width, contentPos는 top, contentSize는 height다. horizontal이 true면 inlinePos는 top, inlineSize는 height, contentPos는 left, contentSize는 width이다.
percentage	Array<"position" | "size"> | boolean	<optional>	false	Whether to set the css size and position of the item to %. item의 css size와 position를 %로 설정할지 여부.
isEqualSize	boolean	<optional>	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. 카드 엘리먼트의 크기가 동일한지 여부. 배치될 카드 엘리먼트의 크기가 모두 동일할 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.
isConstantSize	boolean	<optional>	false	Indicates whether sizes of all card elements does not change, the performance of layout arrangement can be improved. 모든 카드 엘리먼트의 크기가 불변일 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.
gap	number | {horizontal?: number, vertical?: number}	<optional>	5	Gap used to create space around items. 아이템들 사이의 공간.
attributePrefix	string	<optional>	"data-grid-"	The prefix to use element's data attribute. 엘리먼트의 데이타 속성에 사용할 접두사.
resizeDebounce	number	<optional>	100	Debounce time to set in the resize event. (unit: ms) 리사이즈 이벤트에 설정할 디바운스 시간.(단위: ms)
maxResizeDebounce	number	<optional>	0	Maximum time to debounce the resize event. (0 is not set) 리사이즈 이벤트를 디바운스할 수 있는 최대 시간. (0은 미설정이다)
autoResize	boolean	<optional>	true	Whether the resize method should be called automatically after a window resize event. window의 resize 이벤트 이후 자동으로 resize()메소드를 호출할지의 여부.
useFit	boolean	<optional>	true	Whether to move the outline to 0 when the top is empty when rendering. However, if it overflows above the top, the outline is forced to 0. 렌더링시 상단이 비어있을 때 아웃라인을 0으로 이동시킬지 여부. 하지만 상단보다 넘치는 경우 아웃라인을 0으로 강제 이동한다.
useTransform	boolean	<optional>	false	Whether to use transform property instead of using left and top css properties. left, top css 속성 쓰는 대신 transform 속성을 사용할지 여부.
renderOnPropertyChange	boolean	<optional>	true	Whether to automatically render through property change. property의 변화를 통해 자동으로 render를 할지 여부.
preserveUIOnDestroy	boolean	<optional>	false	Whether to preserve the UI of the existing container or item when destroying. destroy 시 기존 컨테이너, 아이템의 UI를 보존할지 여부.
defaultDirection	"start" | "end"	<optional>	"end"	The default direction value when direction is not set in the render option. render옵션에서 direction을 미설정시의 기본 방향값.
outlineLength	number	<optional>	0	The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid. outline의 개수. 아웃라인의 개수가 0이라면 grid의 종류에 따라 계산이 된다.
outlineSize	number	<optional>	0	The size of the outline. If the outline size is 0, it is calculated according to the grid type. outline의 사이즈. 만약 outline의 사이즈가 0이면, grid의 종류에 따라 계산이 된다.
useRoundedSize	boolean	<optional>	true	Whether to get the size as rounded size(offsetWidth, offsetHeight). Set to true if transform is applied to the container. If false, get the size through getBoundingClientRect. 사이즈를 반올림된 사이즈(offsetWidth, offsetHeight)로 가져올지 여부. container에 transform이 적용되어 있다면 true로 설정해라. false면 getBoundingClientRect를 통해 사이즈를 가져온다.
useResizeObserver	boolean	<optional>	false	Whether to use ResizeObserver event to detect container size change when autoResize option is used. autoResize 옵션 사용시 container의 사이즈 변화 감지를 위해 ResizeObserver 이벤트를 사용할지 여부.
observeChildren	boolean	<optional>	false	Whether to detect size change of children if useResizeObserver option is used. useResizeObserver옵션을 사용한다면 children의 사이즈 변화 감지 여부.
externalItemRenderer	ItemRenderer | null	<optional>		You can set the ItemRenderer directly externally. 외부에서 직접 ItemRenderer를 설정할 수 있다.
externalContainerManager	ContainerManager | null	<optional>		You can set the ContainerManager directly externally. 외부에서 직접 ContainerManager를 설정할 수 있다.
columnRange	number | number[]	<optional>	[1, 8]	The minimum and maximum number of items per line. 한 줄에 들어가는 아이템의 최소, 최대 개수.
rowRange	number | number[]	<optional>	0	The minimum and maximum number of rows in a group, 0 is not set. 한 그룹에 들어가는 행의 최소, 최대 개수, 0은 미설정이다.
sizeRange	number | number[]	<optional>	[0, Infinity]	The minimum and maximum size by which the item is adjusted. If it is not calculated, it may deviate from the minimum and maximum sizes. 아이템이 조정되는 최소, 최대 사이즈. 계산이 되지 않는 경우 최소, 최대 사이즈를 벗어날 수 있다.
displayedRow	number	<optional>	-1	Maximum number of rows to be counted for container size. You can hide it on the screen by setting overflow: hidden. -1 is not set. 컨테이너 크기에 계산될 최대 row 개수. overflow: hidden을 설정하면 화면에 가릴 수 있다. -1은 미설정이다.
isCroppedSize	boolean	<optional>	false	Whether to crop when the row size is out of sizeRange. If set to true, this ratio can be broken. row사이즈가 sizeRange에 벗어나면 크롭할지 여부. true로 설정하면 비율이 깨질 수 있다.
inlineOffset	number	<optional>	0	The ratio is maintained except for the offset value in the inline direction. If 'data-grid-inline-offset' is set in the element of each item, it will be applied first. inline 방향의 offset 수치 만큼 제외하고 비율을 유지한다. 각 아이템의 element에 'data-grid-inline-offset' 을 설정하면 우선 적용한다.
contentOffset	number	<optional>	0	The ratio is maintained except for the offset value in the content direction. If 'data-grid-content-offset' is set in the element or JSX of each item, it will be applied first. content 방향의 offset 수치 만큼 제외하고 비율을 유지한다. 각 아이템의 Element 또는 JSX에 'data-grid-content-offset' 을 설정하면 우선 적용한다.
stretch	boolean	<optional>	false	it is possible to basically break the proportion of the item and stretch the inline size to fill the container. If you set the sizeRange range narrowly, you can stretch well. 기본적으로 아이템의 비율을 깨서 inline size를 stretch하여 container를 꽉 채우게 가능하다. sizeRange의 범위를 좁게 설정하면 stretch가 잘 될 수 있다.
stretchRange	Array<string | number>	<optional>	["-10%", "+10%"]	If -, +, or % are added as a string value, it is a relative value to the original size. If it is a number value, the stretch range can be set as an absolute value. If data-grid-min-stretch and data-grid-max-stretch are set in the Element or JSX of each item, they will be applied first. @ string 값으로 -, +, %이 붙으면 원본 크기에 대한 상대값이며 number 값으로 들어오면 절대 값으로 stretch 범위를 설정할 수 있습니다. 각 아이템의 Element 또는 JSX에 data-grid-min-stretch, data-grid-max-stretch을 설정하면 우선 적용한다.
passUnstretchRow	boolean	<optional>		Items placed in the last row are not stretched and are drawn maintaining their proportions. When using InfiniteGrid, it is calculated and re-rendered as follows: 마지막 row에 배치되는 아이템들 경우 stretch되지 않고 비율유지한채로 그려진다. InfiniteGrid를 사용하는 경우 다음 그룹과 같이 계산되어 재렌더링한다.

Events

inherited contentError

Grid.ts, line 387

This event is fired when an error occurs in the content.

콘텐츠 로드에 에러가 날 때 발생하는 이벤트.

• e
  Type: Grid.OnContentError

  The object of data to be sent to an event

  이벤트에 전달되는 데이터 객체

Example

grid.on("contentError", e => {
  e.update();
});

inherited renderComplete

Grid.ts, line 506

This event is fired when the Grid has completed rendering.

Grid가 렌더링이 완료됐을 때 발생하는 이벤트이다.

• e
  Type: Grid.OnRenderComplete

  The object of data to be sent to an event

  이벤트에 전달되는 데이터 객체

Example

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