InfiniteGrid

Class: GridLayout

eg.InfiniteGrid. GridLayout

new eg.InfiniteGrid.GridLayout(options)

GridLayout.ts, line 8

The GridLayout is a layout that stacks cards 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 card.

GridLayout는 벽돌을 쌓아 올린 모양처럼 동일한 너비를 가진 카드를 쌓는 레이아웃이다. 모든 이미지의 너비를 동일한 크기로 조정하고, 가장 높이가 낮은 열을 찾아 새로운 이미지를 삽입한다. 따라서 배치된 카드 사이에 빈 공간이 생기지는 않지만 배치된 레이아웃의 아래쪽은 울퉁불퉁해진다.

  • options optional
    Type: Object

    The option object of eg.InfiniteGrid.GridLayout module

    eg.InfiniteGrid.GridLayout 모듈의 옵션 객체

    • margin (default: 0) optional
      Type: String

      Margin used to create space around items

      아이템들 사이의 공간

    • horizontal (default: false) optional
      Type: Boolean

      Direction of the scroll movement (false: vertical, true: horizontal)

      스크롤 이동 방향 (false: 세로방향, true: 가로방향)

    • align (default: START) optional
      Type: Boolean

      Align of the position of the items (START, CENTER, END, JUSTIFY)

      아이템들의 위치의 정렬 (START, CENTER, END, JUSTIFY)

    • itemSize (default: 0) optional
      Type: Boolean

      The size of the items. If it is 0, it is calculated as the size of the first item in items.

      아이템의 사이즈. 만약 아이템 사이즈가 0이면, 아이템들의 첫번째 아이템의 사이즈로 계산이 된다.

Example
<script>
var ig = new eg.InfiniteGrid("#grid". {
  horizontal: true,
});

ig.setLayout(eg.InfiniteGrid.GridLayout, {
  margin: 10,
  align: "start",
  itemSize: 200
});

// or

var layout = new eg.InfiniteGrid.GridLayout({
  margin: 10,
  align: "center",
  itemSize: 200,
  horizontal: true,
});

</script>

Methods

append(items, outline, cache){Object}

GridLayout.ts, line 65

Adds items at the bottom of a outline.

아이템들을 아웃라인 아래에 추가한다.

  • items
    Type: Array

    Array of items to be layouted

    레이아웃할 아이템들의 배열

  • outline (default: []) optional
    Type: Array

    Array of outline points to be reference points

    기준점이 되는 아웃라인 점들의 배열

  • cache optional
    Type: boolean
Returns:
Type Description
Object
Layouted items and outline of start and end

레이아웃이 된 아이템과 시작과 끝의 아웃라인이 담긴 정보
Example
layout.prepend(items, [100, 200, 300, 400]);

layout(groups, outline){eg.InfiniteGrid.GridLayout}

GridLayout.ts, line 91

Adds items of groups at the bottom of a outline.

그룹들의 아이템들을 아웃라인 아래에 추가한다.

  • groups (default: []) optional
    Type: Array

    Array of groups to be layouted

    레이아웃할 그룹들의 배열

  • outline (default: []) optional
    Type: Array

    Array of outline points to be reference points

    기준점이 되는 아웃라인 점들의 배열

Returns:
Type Description
eg.InfiniteGrid.GridLayout
An instance of a module itself

모듈 자신의 인스턴스
Example
layout.layout(groups, [100, 200, 300, 400]);

prepend(items, outline, cache){Object}

GridLayout.ts, line 78

Adds items at the top of a outline.

아이템을 아웃라인 위에 추가한다.

  • items
    Type: Array

    Array of items to be layouted

    레이아웃할 아이템들의 배열

  • outline (default: []) optional
    Type: Array

    Array of outline points to be reference points

    기준점이 되는 아웃라인 점들의 배열

  • cache optional
    Type: boolean
Returns:
Type Description
Object
Layouted items and outline of start and end

레이아웃이 된 아이템과 시작과 끝의 아웃라인이 담긴 정보
Example
layout.prepend(items, [100, 200, 300, 400]);

setSize(size){eg.InfiniteGrid.GridLayout}

GridLayout.ts, line 127

Set the viewport size of the layout.

레이아웃의 가시 사이즈를 설정한다.

  • size
    Type: Number

    The viewport size of container area where items are added to a layout

    레이아웃에 아이템을 추가하는 컨테이너 영역의 가시 사이즈

Returns:
Type Description
eg.InfiniteGrid.GridLayout
An instance of a module itself

모듈 자신의 인스턴스
Example
layout.setSize(800);
comments powered by Disqus