new Grid.MasonryGrid(container, options)
MasonryGrid is a grid that stacks items with the same width as a stack of bricks. Adjust the width of all images to the same size, find the lowest height column, and insert a new item.
MasonryGrid는 벽돌을 쌓아 올린 모양처럼 동일한 너비를 가진 아이템를 쌓는 레이아웃이다. 모든 이미지의 너비를 동일한 크기로 조정하고, 가장 높이가 낮은 열을 찾아 새로운 이미지를 삽입한다. 따라서 배치된 아이템 사이에 빈 공간이 생기지는 않지만 배치된 레이아웃의 아래쪽은 울퉁불퉁해진다.
-
containerType: HTMLElement | string
A base element for a module
모듈을 적용할 기준 엘리먼트
-
options
The option object of the MasonryGrid module
MasonryGrid 모듈의 옵션 객체
Extends
Members
-
align
-
Align of the position of the items. If you want to use
stretch
, be sure to setcolumn
orcolumnSize
option. ("start", "center", "end", "justify", "stretch")아이템들의 위치의 정렬.
stretch
를 사용하고 싶다면column
또는columnSize
옵션을 설정해라. ("start", "center", "end", "justify", "stretch")- Default Value:
- "justify"
Example
import { MasonryGrid } from "@egjs/grid"; const grid = new MasonryGrid(container, { align: "start", }); grid.align = "justify";
-
column
-
The number of columns. If the number of columns is 0, it is automatically calculated according to the size of the container. Can be used instead of outlineLength.
열의 개수. 열의 개수가 0이라면, 컨테이너의 사이즈에 의해 계산이 된다. outlineLength 대신 사용할 수 있다.
- Default Value:
- 0
Example
import { MasonryGrid } from "@egjs/grid"; const grid = new MasonryGrid(container, { column: 0, }); grid.column = 4;
-
columnSize
-
The size of the columns. If it is 0, it is calculated as the size of the first item in items. Can be used instead of outlineSize.
열의 사이즈. 만약 열의 사이즈가 0이면, 아이템들의 첫번째 아이템의 사이즈로 계산이 된다. outlineSize 대신 사용할 수 있다.
- Default Value:
- 0
Example
import { MasonryGrid } from "@egjs/grid"; const grid = new MasonryGrid(container, { columnSize: 0, }); grid.columnSize = 200;
-
columnSizeRatio
-
The size ratio(inlineSize / contentSize) of the columns. 0 is not set.
열의 사이즈 비율(inlineSize / contentSize). 0은 미설정이다.
- Default Value:
- 0
Example
import { MasonryGrid } from "@egjs/grid"; const grid = new MasonryGrid(container, { columnSizeRatio: 0, }); grid.columnSizeRatio = 0.5;
-
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";
-
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;
-
maxStretchColumnSize
-
If stretch is used, the column can be automatically calculated by setting the maximum size of the column that can be stretched.
stretch를 사용한 경우 최대로 늘릴 수 있는 column의 사이즈를 설정하여 column을 자동 계산할 수 있다.
- Default Value:
- Infinity
Example
import { MasonryGrid } from "@egjs/grid"; const grid = new MasonryGrid(container, { align: "stretch", maxStretchColumnSize: 0, }); grid.maxStretchColumnSize = 400;
-
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;
-
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;
-
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;
-
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
-
Apply the CSS rect of items to fit the Grid and calculate the outline.
Grid에 맞게 아이템들의 CSS rect를 적용하고 outline을 계산한다.
-
direcionType: "start" | "end"
The direction to apply the Grid. ("end": start to end, "start": end to start)
Grid를 적용할 방향. ("end": 시작에서 끝 방향, "start": 끝에서 시작 방향)
-
outlineType: Array.<number>
The start outline to apply the Grid.
Grid를 적용할 시작 outline.
-
-
Releases the instnace and events and returns the CSS of the container and elements.
인스턴스와 이벤트를 해제하고 컨테이너와 엘리먼트들의 CSS를 되돌린다.
-
Options (default:
{}
) optionalType: DestroyOptionsfor destroy.
destory()를 위한 옵션
-
-
Returns the children of the container element.
컨테이너 엘리먼트의 children을 반환한다.
Returns:
Type Description HTMLElement[] -
Get the length corresponding to outline.
outline에 해당하는 length를 가져온다.
-
items (default:
this.items
) optionalType: GridItem[]Items to get outline length.
outline length를 구하기 위한 아이템들.
Returns:
Type Description number -
-
Get the inline size corresponding to outline.
outline에 해당하는 inline 사이즈를 구한다.
-
items (default:
this.items
) optionalType: GridItem[]Items to get outline size.
outline 사이즈를 구하기 위한 아이템들.
-
-
Return Container Element.
컨테이너 엘리먼트를 반환한다.
Returns:
Type Description HTMLElement -
Gets the container's inline size. ("width" if horizontal is false, otherwise "height")
container의 inline 사이즈를 가져온다. (horizontal이 false면 "width", 아니면 "height")
Returns:
Type Description number -
Return items.
아이템들을 반환한다.
Returns:
Type Description GridItem[] -
inherited getOutlines(){GridOutlines}
-
Returns the outlines of the start and end of the Grid.
Grid의 처음과 끝의 outline을 반환한다.
Returns:
Type Description GridOutlines -
inherited getStatus(minimize){GridStatus}
-
Returns current status such as item's position, size. The returned status can be restored with the setStatus() method.
아이템의 위치, 사이즈 등 현재 상태를 반환한다. 반환한 상태는 setStatus() 메서드로 복원할 수 있다.
-
minimize optionalType: boolean
Whether to minimize the status of the item. (default: false)
item의 status를 최소화할지 여부. (default: false)
Returns:
Type Description GridStatus -
-
Rearrange items to fit the grid and render them. When rearrange is complete, the
renderComplete
event is fired.grid에 맞게 아이템을 재배치하고 렌더링을 한다. 배치가 완료되면
renderComplete
이벤트가 발생한다.-
options (default:
{}
) optionalType: RenderOptionsOptions for rendering.
렌더링을 하기 위한 옵션.
Example
import { MasonryGrid } from "@egjs/grid"; const grid = new MasonryGrid(); grid.on("renderComplete", e => { console.log(e); }); grid.renderItems();
-
-
Set items.
아이템들을 설정한다.
-
itemsType: GridItem[]
The items to set.
설정할 아이템들
Returns:
Type Description this -
-
Set outlines.
아웃라인을 설정한다.
-
outlinesType: GridOutlines
The outlines to set.
설정할 아웃라인.
-
-
Set status of the Grid module with the status returned through a call to the getStatus() method.
getStatus() 메서드에 대한 호출을 통해 반환된 상태로 Grid 모듈의 상태를 설정한다.
-
statusType: GridStatus
-
-
When elements change, it synchronizes and renders items.
elements가 바뀐 경우 동기화를 하고 렌더링을 한다.
-
options (default:
{}
) optionalType: RenderOptionsOptions for rendering.
렌더링을 하기 위한 옵션.
-
-
Update the size of the items and render them.
아이템들의 사이즈를 업데이트하고 렌더링을 한다.
-
items (default:
this.items
) optionalType: GridItem[]Items to be updated.
업데이트할 아이템들.
-
options (default:
{}
) optionalType: RenderOptionsOptions for rendering.
렌더링을 하기 위한 옵션.
-
Type Definitions
-
Grid.MasonryGrid.MasonryGridOptionsTSInterface
-
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, andcontentSize
is height. If horizontal is true,inlinePos
is top,inlineSize
is height,contentPos
is left, andcontentSize
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를 설정할 수 있다.
column
number <optional>
0 The number of columns. If the number of columns is 0, it is automatically calculated according to the size of the container. Can be used instead of outlineLength.
열의 개수. 열의 개수가 0이라면, 컨테이너의 사이즈에 의해 계산이 된다. outlineLength 대신 사용할 수 있다.
columnSize
number <optional>
0 The size of the columns. If it is 0, it is calculated as the size of the first item in items. Can be used instead of outlineSize.
열의 사이즈. 만약 열의 사이즈가 0이면, 아이템들의 첫번째 아이템의 사이즈로 계산이 된다. outlineSize 대신 사용할 수 있다.
columnSizeRatio
number <optional>
0 The size ratio(inlineSize / contentSize) of the columns. 0 is not set.
열의 사이즈 비율(inlineSize / contentSize). 0은 미설정이다.
align
GridAlign <optional>
"justify" Align of the position of the items. If you want to use
stretch
, be sure to setcolumn
,columnSize
ormaxStretchColumnSize
option. ("start", "center", "end", "justify", "stretch")
아이템들의 위치의 정렬.
stretch
를 사용하고 싶다면column
,columnSize
또는maxStretchColumnSize
옵션을 설정해라. ("start", "center", "end", "justify", "stretch")contentAlign
MasonryGridVerticalAlign <optional>
"masonry" Content direction alignment of items. “Masonry” is sorted in the form of masonry. Others are applied as content direction alignment, similar to vertical-align of inline-block.
If you set multiple columns (data-grid-column
), the screen may look strange.
아이템들의 Content 방향의 정렬. "masonry"는 masonry 형태로 정렬이 된다. 그 외는 inline-block의 vertical-align과 유사하게 content 방향 정렬로 적용이 된다.칼럼(
data-grid-column
)을 여러개 설정하면 화면이 이상하게 보일 수 있다.columnCalculationThreshold
number <optional>
1 Difference Threshold for Counting Columns. Since offsetSize is calculated by rounding, the number of columns may not be accurate.
칼럼 개수를 계산하기 위한 차이 임계값. offset 사이즈는 반올림으로 게산하기 때문에 정확하지 않을 수 있다.
maxStretchColumnSize
number <optional>
Infinity If stretch is used, the column can be automatically calculated by setting the maximum size of the column that can be stretched.
stretch를 사용한 경우 최대로 늘릴 수 있는 column의 사이즈를 설정하여 column을 자동 계산할 수 있다.
Events
-
This event is fired when an error occurs in the content.
콘텐츠 로드에 에러가 날 때 발생하는 이벤트.
-
eType: Grid.OnContentError
The object of data to be sent to an event
이벤트에 전달되는 데이터 객체
Example
grid.on("contentError", e => { e.update(); });
-
-
This event is fired when the Grid has completed rendering.
Grid가 렌더링이 완료됐을 때 발생하는 이벤트이다.
-
eType: 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); });
-