InfiniteGrid

Class: PackingLayout

eg.InfiniteGrid. PackingLayout

new eg.InfiniteGrid.PackingLayout(options)

PackingLayout.ts, line 35

The PackingLayout is a layout that shows the important cards bigger without sacrificing the weight of the cards. Rows and columns are separated so that cards are dynamically placed within the horizontal and vertical space rather than arranged in an orderly fashion.

PackingLayout은 카드의 본래 크기에 따른 비중을 해치지 않으면서 중요한 카드는 더 크게 보여 주는 레이아웃이다. 행과 열이 구분돼 이미지를 정돈되게 배치하는 대신 가로세로 일정 공간 내에서 동적으로 카드를 배치한다.

  • options optional
    Type: Object

    The option object of eg.InfiniteGrid.PackingLayout module

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

    • 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: 가로방향)

    • aspectRatio (default: 1) optional
      Type: Boolean

      The aspect ratio of the group

      그룹의 가로 세로 비

    • sizeWeight (default: 1) optional
      Type: Boolean

      The size weight when placing an image

      이미지를 배치할 때 사이즈 가중치

    • ratioWeight (default: 1) optional
      Type: Boolean

      The ratio weight when placing an image

      이미지를 배치할 때 비율 가중치

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

ig.setLayout(eg.InfiniteGrid.PackingLayout, {
  margin: 10,
  aspectRatio: 1,
  sizeWeight: 1,
  ratioWeight: 2,
});

// or

var layout = new eg.InfiniteGrid.PackingLayout({
  horizontal: true,
  margin: 10,
  aspectRatio: 1,
  sizeWeight: 1,
  ratioWeight: 2,
});

</script>

Methods

append(items, outline, cache){Object}

PackingLayout.ts, line 93

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]);

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

PackingLayout.ts, line 119

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.PackingLayout
An instance of a module itself

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

prepend(items, outline, cache){Object}

PackingLayout.ts, line 106

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]);

setSize(size){eg.InfiniteGrid.PackingLayout}

PackingLayout.ts, line 142

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.PackingLayout
An instance of a module itself

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