Guides
Grid Types
MasonryInfiniteGrid
MasonryInfiniteGrid 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.
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Svelte
<div class="container"></div>
import { MasonryInfiniteGrid } from "@egjs/infinitegrid";
function getItems(nextGroupKey, count) {
const nextItems = [];
for (let i = 0; i < count; ++i) {
const num = nextGroupKey * count + i;
nextItems.push(`<div class="item">
<div class="thumbnail">
<img src="https://naver.github.io/egjs-infinitegrid/assets/image/${(num % 33) + 1}.jpg" alt="egjs" />
</div>
<div class="info">egjs ${num}</div>
</div>`);
}
return nextItems;
}
const ig = new MasonryInfiniteGrid(".container", {
gap: 5,
});
ig.on("requestAppend", (e) => {
const nextGroupKey = (+e.groupKey || 0) + 1;
ig.append(getItems(nextGroupKey, 10), nextGroupKey);
});
ig.renderItems();
import * as React from "react";
import { MasonryInfiniteGrid } from "@egjs/react-infinitegrid";
function getItems(nextGroupKey: number, count: number) {
const nextItems = [];
const nextKey = nextGroupKey * count;
for (let i = 0; i < count; ++i) {
nextItems.push({ groupKey: nextGroupKey, key: nextKey + i });
}
return nextItems;
}
const Item = ({ num }: any) => <div className="item" style={{
width: "250px",
}}>
<div className="thumbnail">
<img
src={`https://naver.github.io/egjs-infinitegrid/assets/image/${(num % 33) + 1}.jpg`}
alt="egjs"
/>
</div>
<div className="info">{`egjs ${num}`}</div>
</div>;
export default function App() {
const [items, setItems] = React.useState(() => getItems(0, 10));
return <MasonryInfiniteGrid
className="container"
gap={5}
onRequestAppend={(e) => {
const nextGroupKey = (+e.groupKey! || 0) + 1;
setItems([
...items,
...getItems(nextGroupKey, 10),
]);
}}
>
{items.map((item) => <Item data-grid-groupkey={item.groupKey} key={item.key} num={item.key} />)}
</MasonryInfiniteGrid>;
}
<template>
<masonry-infinite-grid
class="container"
v-bind:gap="5"
v-on:request-append="onRequestAppend"
>
<div
class="item"
v-for="item in items"
:key="item.key"
:data-grid-groupkey="item.groupKey"
>
<div class="thumbnail">
<img
v-bind:src="
'https://naver.github.io/egjs-infinitegrid/assets/image/' +
((item.key % 33) + 1) +
'.jpg'
"
alt="egjs"
/>
</div>
<div class="info">egjs {{ item.key }}</div>
</div>
</masonry-infinite-grid>
</template>
<script lang="ts">
import { MasonryInfiniteGrid } from "@egjs/vue-infinitegrid";
export default {
components: {
MasonryInfiniteGrid,
},
data() {
return {
items: this.getItems(0, 10),
};
},
methods: {
getItems(nextGroupKey: number, count: number) {
const nextItems: any[] = [];
for (let i = 0; i < count; ++i) {
const nextKey = nextGroupKey * count + i;
nextItems.push({ groupKey: nextGroupKey, key: nextKey });
}
return nextItems;
},
onRequestAppend(e) {
const nextGroupKey = (+e.groupKey! || 0) + 1;
this.items = [...this.items, ...this.getItems(nextGroupKey, 10)];
},
},
};
</script>
<template>
<masonry-infinite-grid
class="container"
v-bind:gap="5"
v-on:request-append="onRequestAppend"
>
<div
class="item"
v-for="item in items"
:key="item.key"
:data-grid-groupkey="item.groupKey"
>
<div class="thumbnail">
<img
v-bind:src="
'https://naver.github.io/egjs-infinitegrid/assets/image/' +
((item.key % 33) + 1) +
'.jpg'
"
alt="egjs"
/>
</div>
<div class="info">egjs {{ item.key }}</div>
</div>
</masonry-infinite-grid>
</template>
<script lang="ts">
import { MasonryInfiniteGrid } from "@egjs/vue3-infinitegrid";
export default {
components: {
MasonryInfiniteGrid,
},
data() {
return {
items: this.getItems(0, 10),
};
},
methods: {
getItems(nextGroupKey: number, count: number) {
const nextItems: any[] = [];
for (let i = 0; i < count; ++i) {
const nextKey = nextGroupKey * count + i;
nextItems.push({ groupKey: nextGroupKey, key: nextKey });
}
return nextItems;
},
onRequestAppend(e) {
const nextGroupKey = (+e.groupKey! || 0) + 1;
this.items = [...this.items, ...this.getItems(nextGroupKey, 10)];
},
},
};
</script>
<div NgxMasonryInfiniteGrid
class="container"
[gap]="5"
[items]="items"
[trackBy]="trackBy"
[groupBy]="groupBy"
(requestAppend)="onRequestAppend($event)"
*ngFor="let item of [0]; trackBy: randomTrackBy;"
#ig
>
<div class="item" *ngFor ="let item of ig.visibleItems; trackBy: trackBy;">
<div class="thumbnail">
<img [src]="'https://naver.github.io/egjs-infinitegrid/assets/image/' + (item.data.key % 33 + 1) + '.jpg'" alt="egjs" />
</div>
<div class="info">egjs {{item.data.key}}</div>
</div>
</div>
import { Component, Input } from '@angular/core';
import { OnRequestAppend } from '@egjs/infinitegrid';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
items = this.getItems(0, 10);
getItems(nextGroupKey: number, count: number) {
const nextItems = [];
const nextKey = nextGroupKey * count;
for (let i = 0; i < count; ++i) {
nextItems.push({ groupKey: nextGroupKey, key: nextKey + i });
}
return nextItems;
}
groupBy(_: any, item: any) {
return item.groupKey;
}
trackBy(_: any, item: any) {
return item.key;
}
onRequestAppend(e: OnRequestAppend) {
const nextGroupKey = (+e.groupKey! || 0) + 1;
this.items = [
...this.items,
...this.getItems(nextGroupKey, 10),
];
}
}
<script>
import { MasonryInfiniteGrid } from "@egjs/svelte-infinitegrid";
let items = getItems(0, 10);
function getItems(nextGroupKey, count) {
const nextItems = [];
for (let i = 0; i < count; ++i) {
const nextKey = nextGroupKey * count + i;
nextItems.push({ groupKey: nextGroupKey, key: nextKey });
}
return nextItems;
}
</script>
<MasonryInfiniteGrid
class="container"
gap={5}
{items}
on:requestAppend={({ detail: e }) => {
const nextGroupKey = (+e.groupKey || 0) + 1;
items = [...items, ...getItems(nextGroupKey, 10)];
}}
let:visibleItems
>
{#each visibleItems as item (item.key)}
<div class="item">
<div class="thumbnail">
<img
src={`https://naver.github.io/egjs-infinitegrid/assets/image/${
(item.key % 33) + 1
}.jpg`}
alt="egjs"
/>
</div>
<div class="info">{`egjs ${item.key}`}</div>
</div>
{/each}
</MasonryInfiniteGrid>
JustifiedInfiniteGrid
'justified' is a printing term with the meaning that 'it fits in one row wide'. JustifiedGrid is a grid that the item is filled up on the basis of a line given a size.
- If 'data-grid-inline-offset' or 'data-grid-content-offset' are set for item element, the ratio is maintained except for the offset value.
- If 'data-grid-maintained-target' is set for an element whose ratio is to be maintained, the item is rendered while maintaining the ratio of the element.
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Svelte
<div class="container"></div>
import { JustifiedInfiniteGrid } from "@egjs/infinitegrid";
function getItems(nextGroupKey, count) {
const nextItems = [];
for (let i = 0; i < count; ++i) {
const num = nextGroupKey * count + i;
nextItems.push(`<div class="item">
<div class="thumbnail">
<img src="https://naver.github.io/egjs-infinitegrid/assets/image/${(num % 33) + 1}.jpg" alt="egjs" data-grid-maintained-target="true"/>
</div>
<div class="info">egjs ${num}</div>
</div>`);
}
return nextItems;
}
const ig = new JustifiedInfiniteGrid(".container", {
gap: 5,
});
ig.on("requestAppend", (e) => {
const nextGroupKey = (+e.groupKey || 0) + 1;
ig.append(getItems(nextGroupKey, 10), nextGroupKey);
});
ig.renderItems();
import * as React from "react";
import { JustifiedInfiniteGrid } from "@egjs/react-infinitegrid";
function getItems(nextGroupKey: number, count: number) {
const nextItems = [];
const nextKey = nextGroupKey * count;
for (let i = 0; i < count; ++i) {
nextItems.push({ groupKey: nextGroupKey, key: nextKey + i });
}
return nextItems;
}
const Item = ({ num }: any) => <div className="item" style={{
width: "250px",
}}>
<div className="thumbnail">
<img
src={`https://naver.github.io/egjs-infinitegrid/assets/image/${(num % 33) + 1}.jpg`}
alt="egjs" data-grid-maintained-target="true"
/>
</div>
<div className="info">{`egjs ${num}`}</div>
</div>;
export default function App() {
const [items, setItems] = React.useState(() => getItems(0, 10));
return <JustifiedInfiniteGrid
className="container"
gap={5}
onRequestAppend={(e) => {
const nextGroupKey = (+e.groupKey! || 0) + 1;
setItems([
...items,
...getItems(nextGroupKey, 10),
]);
}}
>
{items.map((item) => <Item data-grid-groupkey={item.groupKey} key={item.key} num={item.key} />)}
</JustifiedInfiniteGrid>;
}
<template>
<justified-infinite-grid
class="container"
v-bind:gap="5"
v-on:request-append="onRequestAppend"
>
<div
class="item"
v-for="item in items"
:key="item.key"
:data-grid-groupkey="item.groupKey"
>
<div class="thumbnail">
<img
v-bind:src="
'https://naver.github.io/egjs-infinitegrid/assets/image/' +
((item.key % 33) + 1) +
'.jpg'
"
alt="egjs" data-grid-maintained-target="true"
/>
</div>
<div class="info">egjs {{ item.key }}</div>
</div>
</justified-infinite-grid>
</template>
<script lang="ts">
import { JustifiedInfiniteGrid } from "@egjs/vue-infinitegrid";
export default {
components: {
JustifiedInfiniteGrid,
},
data() {
return {
items: this.getItems(0, 10),
};
},
methods: {
getItems(nextGroupKey: number, count: number) {
const nextItems: any[] = [];
for (let i = 0; i < count; ++i) {
const nextKey = nextGroupKey * count + i;
nextItems.push({ groupKey: nextGroupKey, key: nextKey });
}
return nextItems;
},
onRequestAppend(e) {
const nextGroupKey = (+e.groupKey! || 0) + 1;
this.items = [...this.items, ...this.getItems(nextGroupKey, 10)];
},
},
};
</script>
<template>
<justified-infinite-grid
class="container"
v-bind:gap="5"
v-on:request-append="onRequestAppend"
>
<div
class="item"
v-for="item in items"
:key="item.key"
:data-grid-groupkey="item.groupKey"
>
<div class="thumbnail">
<img
v-bind:src="
'https://naver.github.io/egjs-infinitegrid/assets/image/' +
((item.key % 33) + 1) +
'.jpg'
"
alt="egjs" data-grid-maintained-target="true"
/>
</div>
<div class="info">egjs {{ item.key }}</div>
</div>
</justified-infinite-grid>
</template>
<script lang="ts">
import { JustifiedInfiniteGrid } from "@egjs/vue3-infinitegrid";
export default {
components: {
JustifiedInfiniteGrid,
},
data() {
return {
items: this.getItems(0, 10),
};
},
methods: {
getItems(nextGroupKey: number, count: number) {
const nextItems: any[] = [];
for (let i = 0; i < count; ++i) {
const nextKey = nextGroupKey * count + i;
nextItems.push({ groupKey: nextGroupKey, key: nextKey });
}
return nextItems;
},
onRequestAppend(e) {
const nextGroupKey = (+e.groupKey! || 0) + 1;
this.items = [...this.items, ...this.getItems(nextGroupKey, 10)];
},
},
};
</script>
<div NgxJustifiedInfiniteGrid
class="container"
[gap]="5"
[items]="items"
[trackBy]="trackBy"
[groupBy]="groupBy"
(requestAppend)="onRequestAppend($event)"
*ngFor="let item of [0]; trackBy: randomTrackBy;"
#ig
>
<div class="item" *ngFor ="let item of ig.visibleItems; trackBy: trackBy;">
<div class="thumbnail">
<img [src]="'https://naver.github.io/egjs-infinitegrid/assets/image/' + (item.data.key % 33 + 1) + '.jpg'" alt="egjs" data-grid-maintained-target="true"/>
</div>
<div class="info">egjs {{item.data.key}}</div>
</div>
</div>
import { Component, Input } from '@angular/core';
import { OnRequestAppend } from '@egjs/infinitegrid';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
items = this.getItems(0, 10);
getItems(nextGroupKey: number, count: number) {
const nextItems = [];
const nextKey = nextGroupKey * count;
for (let i = 0; i < count; ++i) {
nextItems.push({ groupKey: nextGroupKey, key: nextKey + i });
}
return nextItems;
}
groupBy(_: any, item: any) {
return item.groupKey;
}
trackBy(_: any, item: any) {
return item.key;
}
onRequestAppend(e: OnRequestAppend) {
const nextGroupKey = (+e.groupKey! || 0) + 1;
this.items = [
...this.items,
...this.getItems(nextGroupKey, 10),
];
}
}
<script>
import { JustifiedInfiniteGrid } from "@egjs/svelte-infinitegrid";
let items = getItems(0, 10);
function getItems(nextGroupKey, count) {
const nextItems = [];
for (let i = 0; i < count; ++i) {
const nextKey = nextGroupKey * count + i;
nextItems.push({ groupKey: nextGroupKey, key: nextKey });
}
return nextItems;
}
</script>
<JustifiedInfiniteGrid
class="container"
gap={5}
{items}
on:requestAppend={({ detail: e }) => {
const nextGroupKey = (+e.groupKey || 0) + 1;
items = [...items, ...getItems(nextGroupKey, 10)];
}}
let:visibleItems
>
{#each visibleItems as item (item.key)}
<div class="item">
<div class="thumbnail">
<img
src={`https://naver.github.io/egjs-infinitegrid/assets/image/${
(item.key % 33) + 1
}.jpg`}
alt="egjs" data-grid-maintained-target="true"
/>
</div>
<div class="info">{`egjs ${item.key}`}</div>
</div>
{/each}
</JustifiedInfiniteGrid>
JustifiedInfiniteGrid (Stretch)
stretch
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.
stretchRange
: 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. Ifdata-grid-min-stretch
anddata-grid-max-stretch
are set in the Element or JSX of each item, they will be applied first.passUnstretchRow
: 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:
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Svelte
<div class="container"></div>
import { JustifiedInfiniteGrid } from "@egjs/infinitegrid";
function getItems(nextGroupKey, count) {
const nextItems = [];
for (let i = 0; i < count; ++i) {
const num = nextGroupKey * count + i;
nextItems.push(`<div class="item">
<div class="thumbnail">
<img src="https://naver.github.io/egjs-infinitegrid/assets/image/${(num % 33) + 1}.jpg" alt="egjs" />
</div>
<div class="info">egjs ${num}</div>
</div>`);
}
return nextItems;
}
const ig = new JustifiedInfiniteGrid(".container", {
gap: 5,
stretch: true,
passUnstretchRow: true,
sizeRange: [228,228],
stretchRange: [144,320],
});
ig.on("requestAppend", (e) => {
const nextGroupKey = (+e.groupKey || 0) + 1;
ig.append(getItems(nextGroupKey, 10), nextGroupKey);
});
ig.renderItems();
import * as React from "react";
import { JustifiedInfiniteGrid } from "@egjs/react-infinitegrid";
function getItems(nextGroupKey: number, count: number) {
const nextItems = [];
const nextKey = nextGroupKey * count;
for (let i = 0; i < count; ++i) {
nextItems.push({ groupKey: nextGroupKey, key: nextKey + i });
}
return nextItems;
}
const Item = ({ num }: any) => <div className="item" style={{
width: "250px",
}}>
<div className="thumbnail">
<img
src={`https://naver.github.io/egjs-infinitegrid/assets/image/${(num % 33) + 1}.jpg`}
alt="egjs"
/>
</div>
<div className="info">{`egjs ${num}`}</div>
</div>;
export default function App() {
const [items, setItems] = React.useState(() => getItems(0, 10));
return <JustifiedInfiniteGrid
className="container"
gap={5}
stretch={true}
passUnstretchRow={true}
sizeRange={[228,228]}
stretchRange={[144,320]}
onRequestAppend={(e) => {
const nextGroupKey = (+e.groupKey! || 0) + 1;
setItems([
...items,
...getItems(nextGroupKey, 10),
]);
}}
>
{items.map((item) => <Item data-grid-groupkey={item.groupKey} key={item.key} num={item.key} />)}
</JustifiedInfiniteGrid>;
}
<template>
<justified-infinite-grid
class="container"
v-bind:gap="5"
v-bind:stretch="true"
v-bind:passUnstretchRow="true"
v-bind:sizeRange="[228,228]"
v-bind:stretchRange="[144,320]"
v-on:request-append="onRequestAppend"
>
<div
class="item"
v-for="item in items"
:key="item.key"
:data-grid-groupkey="item.groupKey"
>
<div class="thumbnail">
<img
v-bind:src="
'https://naver.github.io/egjs-infinitegrid/assets/image/' +
((item.key % 33) + 1) +
'.jpg'
"
alt="egjs"
/>
</div>
<div class="info">egjs {{ item.key }}</div>
</div>
</justified-infinite-grid>
</template>
<script lang="ts">
import { JustifiedInfiniteGrid } from "@egjs/vue-infinitegrid";
export default {
components: {
JustifiedInfiniteGrid,
},
data() {
return {
items: this.getItems(0, 10),
};
},
methods: {
getItems(nextGroupKey: number, count: number) {
const nextItems: any[] = [];
for (let i = 0; i < count; ++i) {
const nextKey = nextGroupKey * count + i;
nextItems.push({ groupKey: nextGroupKey, key: nextKey });
}
return nextItems;
},
onRequestAppend(e) {
const nextGroupKey = (+e.groupKey! || 0) + 1;
this.items = [...this.items, ...this.getItems(nextGroupKey, 10)];
},
},
};
</script>
<template>
<justified-infinite-grid
class="container"
v-bind:gap="5"
v-bind:stretch="true"
v-bind:passUnstretchRow="true"
v-bind:sizeRange="[228,228]"
v-bind:stretchRange="[144,320]"
v-on:request-append="onRequestAppend"
>
<div
class="item"
v-for="item in items"
:key="item.key"
:data-grid-groupkey="item.groupKey"
>
<div class="thumbnail">
<img
v-bind:src="
'https://naver.github.io/egjs-infinitegrid/assets/image/' +
((item.key % 33) + 1) +
'.jpg'
"
alt="egjs"
/>
</div>
<div class="info">egjs {{ item.key }}</div>
</div>
</justified-infinite-grid>
</template>
<script lang="ts">
import { JustifiedInfiniteGrid } from "@egjs/vue3-infinitegrid";
export default {
components: {
JustifiedInfiniteGrid,
},
data() {
return {
items: this.getItems(0, 10),
};
},
methods: {
getItems(nextGroupKey: number, count: number) {
const nextItems: any[] = [];
for (let i = 0; i < count; ++i) {
const nextKey = nextGroupKey * count + i;
nextItems.push({ groupKey: nextGroupKey, key: nextKey });
}
return nextItems;
},
onRequestAppend(e) {
const nextGroupKey = (+e.groupKey! || 0) + 1;
this.items = [...this.items, ...this.getItems(nextGroupKey, 10)];
},
},
};
</script>
<div NgxJustifiedInfiniteGrid
class="container"
[gap]="5"
[stretch]="true"
[passUnstretchRow]="true"
[sizeRange]="[228,228]"
[stretchRange]="[144,320]"
[items]="items"
[trackBy]="trackBy"
[groupBy]="groupBy"
(requestAppend)="onRequestAppend($event)"
*ngFor="let item of [0]; trackBy: randomTrackBy;"
#ig
>
<div class="item" *ngFor ="let item of ig.visibleItems; trackBy: trackBy;">
<div class="thumbnail">
<img [src]="'https://naver.github.io/egjs-infinitegrid/assets/image/' + (item.data.key % 33 + 1) + '.jpg'" alt="egjs" />
</div>
<div class="info">egjs {{item.data.key}}</div>
</div>
</div>
import { Component, Input } from '@angular/core';
import { OnRequestAppend } from '@egjs/infinitegrid';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
items = this.getItems(0, 10);
getItems(nextGroupKey: number, count: number) {
const nextItems = [];
const nextKey = nextGroupKey * count;
for (let i = 0; i < count; ++i) {
nextItems.push({ groupKey: nextGroupKey, key: nextKey + i });
}
return nextItems;
}
groupBy(_: any, item: any) {
return item.groupKey;
}
trackBy(_: any, item: any) {
return item.key;
}
onRequestAppend(e: OnRequestAppend) {
const nextGroupKey = (+e.groupKey! || 0) + 1;
this.items = [
...this.items,
...this.getItems(nextGroupKey, 10),
];
}
}
<script>
import { JustifiedInfiniteGrid } from "@egjs/svelte-infinitegrid";
let items = getItems(0, 10);
function getItems(nextGroupKey, count) {
const nextItems = [];
for (let i = 0; i < count; ++i) {
const nextKey = nextGroupKey * count + i;
nextItems.push({ groupKey: nextGroupKey, key: nextKey });
}
return nextItems;
}
</script>
<JustifiedInfiniteGrid
class="container"
gap={5}
stretch={true}
passUnstretchRow={true}
sizeRange={[228,228]}
stretchRange={[144,320]}
{items}
on:requestAppend={({ detail: e }) => {
const nextGroupKey = (+e.groupKey || 0) + 1;
items = [...items, ...getItems(nextGroupKey, 10)];
}}
let:visibleItems
>
{#each visibleItems as item (item.key)}
<div class="item">
<div class="thumbnail">
<img
src={`https://naver.github.io/egjs-infinitegrid/assets/image/${
(item.key % 33) + 1
}.jpg`}
alt="egjs"
/>
</div>
<div class="info">{`egjs ${item.key}`}</div>
</div>
{/each}
</JustifiedInfiniteGrid>
FrameInfiniteGrid
'Frame' is a printing term with the meaning that 'it fits in one row wide'. FrameGrid is a grid that the item is filled up on the basis of a line given a size.
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Svelte
<div class="container"></div>
import { FrameInfiniteGrid } from "@egjs/infinitegrid";
function getItems(nextGroupKey, count) {
const nextItems = [];
for (let i = 0; i < count; ++i) {
const num = nextGroupKey * count + i;
nextItems.push(`<div class="item">
<div class="thumbnail">
<img src="https://naver.github.io/egjs-infinitegrid/assets/image/${(num % 33) + 1}.jpg" alt="egjs" />
</div>
<div class="info">egjs ${num}</div>
</div>`);
}
return nextItems;
}
const ig = new FrameInfiniteGrid(".container", {
gap: 5,
frame: [[1,1,2,3,3],[1,1,4,4,5]],
});
ig.on("requestAppend", (e) => {
const nextGroupKey = (+e.groupKey || 0) + 1;
ig.append(getItems(nextGroupKey, 10), nextGroupKey);
});
ig.renderItems();
import * as React from "react";
import { FrameInfiniteGrid } from "@egjs/react-infinitegrid";
function getItems(nextGroupKey: number, count: number) {
const nextItems = [];
const nextKey = nextGroupKey * count;
for (let i = 0; i < count; ++i) {
nextItems.push({ groupKey: nextGroupKey, key: nextKey + i });
}
return nextItems;
}
const Item = ({ num }: any) => <div className="item" style={{
width: "250px",
}}>
<div className="thumbnail">
<img
src={`https://naver.github.io/egjs-infinitegrid/assets/image/${(num % 33) + 1}.jpg`}
alt="egjs"
/>
</div>
<div className="info">{`egjs ${num}`}</div>
</div>;
export default function App() {
const [items, setItems] = React.useState(() => getItems(0, 10));
return <FrameInfiniteGrid
className="container"
gap={5}
frame={[[1,1,2,3,3],[1,1,4,4,5]]}
onRequestAppend={(e) => {
const nextGroupKey = (+e.groupKey! || 0) + 1;
setItems([
...items,
...getItems(nextGroupKey, 10),
]);
}}
>
{items.map((item) => <Item data-grid-groupkey={item.groupKey} key={item.key} num={item.key} />)}
</FrameInfiniteGrid>;
}
<template>
<frame-infinite-grid
class="container"
v-bind:gap="5"
v-bind:frame="[[1,1,2,3,3],[1,1,4,4,5]]"
v-on:request-append="onRequestAppend"
>
<div
class="item"
v-for="item in items"
:key="item.key"
:data-grid-groupkey="item.groupKey"
>
<div class="thumbnail">
<img
v-bind:src="
'https://naver.github.io/egjs-infinitegrid/assets/image/' +
((item.key % 33) + 1) +
'.jpg'
"
alt="egjs"
/>
</div>
<div class="info">egjs {{ item.key }}</div>
</div>
</frame-infinite-grid>
</template>
<script lang="ts">
import { FrameInfiniteGrid } from "@egjs/vue-infinitegrid";
export default {
components: {
FrameInfiniteGrid,
},
data() {
return {
items: this.getItems(0, 10),
};
},
methods: {
getItems(nextGroupKey: number, count: number) {
const nextItems: any[] = [];
for (let i = 0; i < count; ++i) {
const nextKey = nextGroupKey * count + i;
nextItems.push({ groupKey: nextGroupKey, key: nextKey });
}
return nextItems;
},
onRequestAppend(e) {
const nextGroupKey = (+e.groupKey! || 0) + 1;
this.items = [...this.items, ...this.getItems(nextGroupKey, 10)];
},
},
};
</script>
<template>
<frame-infinite-grid
class="container"
v-bind:gap="5"
v-bind:frame="[[1,1,2,3,3],[1,1,4,4,5]]"
v-on:request-append="onRequestAppend"
>
<div
class="item"
v-for="item in items"
:key="item.key"
:data-grid-groupkey="item.groupKey"
>
<div class="thumbnail">
<img
v-bind:src="
'https://naver.github.io/egjs-infinitegrid/assets/image/' +
((item.key % 33) + 1) +
'.jpg'
"
alt="egjs"
/>
</div>
<div class="info">egjs {{ item.key }}</div>
</div>
</frame-infinite-grid>
</template>
<script lang="ts">
import { FrameInfiniteGrid } from "@egjs/vue3-infinitegrid";
export default {
components: {
FrameInfiniteGrid,
},
data() {
return {
items: this.getItems(0, 10),
};
},
methods: {
getItems(nextGroupKey: number, count: number) {
const nextItems: any[] = [];
for (let i = 0; i < count; ++i) {
const nextKey = nextGroupKey * count + i;
nextItems.push({ groupKey: nextGroupKey, key: nextKey });
}
return nextItems;
},
onRequestAppend(e) {
const nextGroupKey = (+e.groupKey! || 0) + 1;
this.items = [...this.items, ...this.getItems(nextGroupKey, 10)];
},
},
};
</script>
<div NgxFrameInfiniteGrid
class="container"
[gap]="5"
[frame]="[[1,1,2,3,3],[1,1,4,4,5]]"
[items]="items"
[trackBy]="trackBy"
[groupBy]="groupBy"
(requestAppend)="onRequestAppend($event)"
*ngFor="let item of [0]; trackBy: randomTrackBy;"
#ig
>
<div class="item" *ngFor ="let item of ig.visibleItems; trackBy: trackBy;">
<div class="thumbnail">
<img [src]="'https://naver.github.io/egjs-infinitegrid/assets/image/' + (item.data.key % 33 + 1) + '.jpg'" alt="egjs" />
</div>
<div class="info">egjs {{item.data.key}}</div>
</div>
</div>
import { Component, Input } from '@angular/core';
import { OnRequestAppend } from '@egjs/infinitegrid';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
items = this.getItems(0, 10);
getItems(nextGroupKey: number, count: number) {
const nextItems = [];
const nextKey = nextGroupKey * count;
for (let i = 0; i < count; ++i) {
nextItems.push({ groupKey: nextGroupKey, key: nextKey + i });
}
return nextItems;
}
groupBy(_: any, item: any) {
return item.groupKey;
}
trackBy(_: any, item: any) {
return item.key;
}
onRequestAppend(e: OnRequestAppend) {
const nextGroupKey = (+e.groupKey! || 0) + 1;
this.items = [
...this.items,
...this.getItems(nextGroupKey, 10),
];
}
}
<script>
import { FrameInfiniteGrid } from "@egjs/svelte-infinitegrid";
let items = getItems(0, 10);
function getItems(nextGroupKey, count) {
const nextItems = [];
for (let i = 0; i < count; ++i) {
const nextKey = nextGroupKey * count + i;
nextItems.push({ groupKey: nextGroupKey, key: nextKey });
}
return nextItems;
}
</script>
<FrameInfiniteGrid
class="container"
gap={5}
frame={[[1,1,2,3,3],[1,1,4,4,5]]}
{items}
on:requestAppend={({ detail: e }) => {
const nextGroupKey = (+e.groupKey || 0) + 1;
items = [...items, ...getItems(nextGroupKey, 10)];
}}
let:visibleItems
>
{#each visibleItems as item (item.key)}
<div class="item">
<div class="thumbnail">
<img
src={`https://naver.github.io/egjs-infinitegrid/assets/image/${
(item.key % 33) + 1
}.jpg`}
alt="egjs"
/>
</div>
<div class="info">{`egjs ${item.key}`}</div>
</div>
{/each}
</FrameInfiniteGrid>
PackingInfiniteGrid
The PackingGrid is a grid that shows the important items bigger without sacrificing the weight of the items.
- Rows and columns are separated so that items are dynamically placed within the horizontal and vertical space rather than arranged in an orderly fashion.
- If
sizeWeight
is higher thanratioWeight
, the size of items is preserved as much as possible. - Conversely, if
ratioWeight
is higher thansizeWeight
, the ratio of items is preserved as much as possible.
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Svelte
<div class="container"></div>
import { PackingInfiniteGrid } from "@egjs/infinitegrid";
function getItems(nextGroupKey, count) {
const nextItems = [];
for (let i = 0; i < count; ++i) {
const num = nextGroupKey * count + i;
nextItems.push(`<div class="item">
<div class="thumbnail">
<img src="https://naver.github.io/egjs-infinitegrid/assets/image/${(num % 33) + 1}.jpg" alt="egjs" />
</div>
<div class="info">egjs ${num}</div>
</div>`);
}
return nextItems;
}
const ig = new PackingInfiniteGrid(".container", {
gap: 5,
});
ig.on("requestAppend", (e) => {
const nextGroupKey = (+e.groupKey || 0) + 1;
ig.append(getItems(nextGroupKey, 10), nextGroupKey);
});
ig.renderItems();
import * as React from "react";
import { PackingInfiniteGrid } from "@egjs/react-infinitegrid";
function getItems(nextGroupKey: number, count: number) {
const nextItems = [];
const nextKey = nextGroupKey * count;
for (let i = 0; i < count; ++i) {
nextItems.push({ groupKey: nextGroupKey, key: nextKey + i });
}
return nextItems;
}
const Item = ({ num }: any) => <div className="item" style={{
width: "250px",
}}>
<div className="thumbnail">
<img
src={`https://naver.github.io/egjs-infinitegrid/assets/image/${(num % 33) + 1}.jpg`}
alt="egjs"
/>
</div>
<div className="info">{`egjs ${num}`}</div>
</div>;
export default function App() {
const [items, setItems] = React.useState(() => getItems(0, 10));
return <PackingInfiniteGrid
className="container"
gap={5}
onRequestAppend={(e) => {
const nextGroupKey = (+e.groupKey! || 0) + 1;
setItems([
...items,
...getItems(nextGroupKey, 10),
]);
}}
>
{items.map((item) => <Item data-grid-groupkey={item.groupKey} key={item.key} num={item.key} />)}
</PackingInfiniteGrid>;
}
<template>
<packing-infinite-grid
class="container"
v-bind:gap="5"
v-on:request-append="onRequestAppend"
>
<div
class="item"
v-for="item in items"
:key="item.key"
:data-grid-groupkey="item.groupKey"
>
<div class="thumbnail">
<img
v-bind:src="
'https://naver.github.io/egjs-infinitegrid/assets/image/' +
((item.key % 33) + 1) +
'.jpg'
"
alt="egjs"
/>
</div>
<div class="info">egjs {{ item.key }}</div>
</div>
</packing-infinite-grid>
</template>
<script lang="ts">
import { PackingInfiniteGrid } from "@egjs/vue-infinitegrid";
export default {
components: {
PackingInfiniteGrid,
},
data() {
return {
items: this.getItems(0, 10),
};
},
methods: {
getItems(nextGroupKey: number, count: number) {
const nextItems: any[] = [];
for (let i = 0; i < count; ++i) {
const nextKey = nextGroupKey * count + i;
nextItems.push({ groupKey: nextGroupKey, key: nextKey });
}
return nextItems;
},
onRequestAppend(e) {
const nextGroupKey = (+e.groupKey! || 0) + 1;
this.items = [...this.items, ...this.getItems(nextGroupKey, 10)];
},
},
};
</script>
<template>
<packing-infinite-grid
class="container"
v-bind:gap="5"
v-on:request-append="onRequestAppend"
>
<div
class="item"
v-for="item in items"
:key="item.key"
:data-grid-groupkey="item.groupKey"
>
<div class="thumbnail">
<img
v-bind:src="
'https://naver.github.io/egjs-infinitegrid/assets/image/' +
((item.key % 33) + 1) +
'.jpg'
"
alt="egjs"
/>
</div>
<div class="info">egjs {{ item.key }}</div>
</div>
</packing-infinite-grid>
</template>
<script lang="ts">
import { PackingInfiniteGrid } from "@egjs/vue3-infinitegrid";
export default {
components: {
PackingInfiniteGrid,
},
data() {
return {
items: this.getItems(0, 10),
};
},
methods: {
getItems(nextGroupKey: number, count: number) {
const nextItems: any[] = [];
for (let i = 0; i < count; ++i) {
const nextKey = nextGroupKey * count + i;
nextItems.push({ groupKey: nextGroupKey, key: nextKey });
}
return nextItems;
},
onRequestAppend(e) {
const nextGroupKey = (+e.groupKey! || 0) + 1;
this.items = [...this.items, ...this.getItems(nextGroupKey, 10)];
},
},
};
</script>
<div NgxPackingInfiniteGrid
class="container"
[gap]="5"
[items]="items"
[trackBy]="trackBy"
[groupBy]="groupBy"
(requestAppend)="onRequestAppend($event)"
*ngFor="let item of [0]; trackBy: randomTrackBy;"
#ig
>
<div class="item" *ngFor ="let item of ig.visibleItems; trackBy: trackBy;">
<div class="thumbnail">
<img [src]="'https://naver.github.io/egjs-infinitegrid/assets/image/' + (item.data.key % 33 + 1) + '.jpg'" alt="egjs" />
</div>
<div class="info">egjs {{item.data.key}}</div>
</div>
</div>
import { Component, Input } from '@angular/core';
import { OnRequestAppend } from '@egjs/infinitegrid';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
items = this.getItems(0, 10);
getItems(nextGroupKey: number, count: number) {
const nextItems = [];
const nextKey = nextGroupKey * count;
for (let i = 0; i < count; ++i) {
nextItems.push({ groupKey: nextGroupKey, key: nextKey + i });
}
return nextItems;
}
groupBy(_: any, item: any) {
return item.groupKey;
}
trackBy(_: any, item: any) {
return item.key;
}
onRequestAppend(e: OnRequestAppend) {
const nextGroupKey = (+e.groupKey! || 0) + 1;
this.items = [
...this.items,
...this.getItems(nextGroupKey, 10),
];
}
}
<script>
import { PackingInfiniteGrid } from "@egjs/svelte-infinitegrid";
let items = getItems(0, 10);
function getItems(nextGroupKey, count) {
const nextItems = [];
for (let i = 0; i < count; ++i) {
const nextKey = nextGroupKey * count + i;
nextItems.push({ groupKey: nextGroupKey, key: nextKey });
}
return nextItems;
}
</script>
<PackingInfiniteGrid
class="container"
gap={5}
{items}
on:requestAppend={({ detail: e }) => {
const nextGroupKey = (+e.groupKey || 0) + 1;
items = [...items, ...getItems(nextGroupKey, 10)];
}}
let:visibleItems
>
{#each visibleItems as item (item.key)}
<div class="item">
<div class="thumbnail">
<img
src={`https://naver.github.io/egjs-infinitegrid/assets/image/${
(item.key % 33) + 1
}.jpg`}
alt="egjs"
/>
</div>
<div class="info">{`egjs ${item.key}`}</div>
</div>
{/each}
</PackingInfiniteGrid>
Insert Data
Through scrolling, when the scroll reaches the end, the requestAppend
event is raised, and when it reaches the start, the requestPrepend
event is raised. You can add data within this event.
- You can set the key of an item through
itemBy
prop. - You can set the group's key through
groupBy
prop.
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Svelte
If the append
method or prepend
method is used, there is no need to use a separate key. You can set the groupKey through the second argument.
ig.on("requestAppend", e => {
const nextGroupKey = (+e.groupKey || 0) + 1;
ig.append(getItems(nextGroupKey, 10), nextGroupKey);
});
- React's groupBy default is jsx's
data-grid-groupkey
prop. (attributePrefix: data-grid-) - React's itemBy default is jsx's key.
const [items, setItems] = React.useState([]);
<MasonryInfiniteGrid
groupBy={(jsx) => jsx.props["data-grid-groupkey"]}
itemBy={(jsx) => jsx.key}
onRequestAppend={(e) => {
const nextGroupKey = (+e.groupKey! || 0) + 1;
setItems([
...items,
...getItems(nextGroupKey, 10),
]);
}}>
{items.map((item) => <Item data-grid-groupkey={item.groupKey} key={item.key} num={item.key} />)}
</MasonryInfiniteGrid>
- Vue's groupBy default is jsx's
data-grid-groupkey
prop. (attributePrefix: data-grid-) - Vue's itemBy default is jsx's key.
<masonry-infinite-grid
:itemBy="itemBy"
:groupBy="groupBy"
@request-append="onRequestAppend">
<div
class="item"
v-for="item in items"
:key="item.key"
:data-grid-groupkey="item.groupKey"
>
...
</div>
</masonry-infinite-grid>
export default {
data() {
return {
items: [],
},
},
methods: {
itemBy(jsx) {
const key = jsx.key;
return key == null ? i : key;
},
groupBy(jsx) {
const props = jsx.props || jsx.data?.attrs;
return props ? props[`data-grid-groupkey`] : undefined;
},
onRequestAppend(e) {
const nextGroupKey = (+e.groupKey! || 0) + 1;
this.items = [
...this.items,
...getItems(nextGroupKey, 10),
];
},
};
- Vue's groupBy default is jsx's
data-grid-groupkey
prop. (attributePrefix: data-grid-) - Vue's itemBy default is jsx's key.
<masonry-infinite-grid
:itemBy="itemBy"
:groupBy="groupBy"
@request-append="onRequestAppend">
<div
class="item"
v-for="item in items"
:key="item.key"
:data-grid-groupkey="item.groupKey"
>
...
</div>
</masonry-infinite-grid>
export default {
data() {
return {
items: [],
},
},
methods: {
itemBy(jsx) {
const key = jsx.key;
return key == null ? i : key;
},
groupBy(jsx) {
const props = jsx.props || jsx.data?.attrs;
return props ? props[`${attributePrefix}groupkey`] : undefined;
},
onRequestAppend(e) {
const nextGroupKey = (+e.groupKey! || 0) + 1;
this.items = [
...this.items,
...getItems(nextGroupKey, 10),
];
},
};
<div NgxMasonryInfiniteGrid
class="container"
[items]="items"
[trackBy]="trackBy"
[groupBy]="groupBy"
[useLoading]="true"
(requestAppend)="onRequestAppend($event)"
#ig
>
<div class="item" *ngFor ="let item of ig.visibleItems; trackBy: trackBy;">
...
</div>
</div>
export default class App {
items = [];
groupBy(_: any, item: any) {
return item.groupKey;
}
trackBy(_: any, item: any) {
return item.key;
}
onRequestAppend(e) {
const nextGroupKey = (+e.groupKey! || 0) + 1;
this.items = [
...this.items,
...getItems(nextGroupKey, 10),
];
}
};
- Svelte's
groupBy
default is item'sgroupKey
. - Svelte's
itemBy
default is items'skey
.
<script>
let items = [];
</script>
<MasonryInfiniteGrid
items={items}
groupBy={(item) => item.groupKey}
itemBy={(item) => item.key}
on:requestAppend={({ detail: e }) => {
items = [
...items,
...getItems(nextGroupKey, 10),
];
}}>
{#each visibleItems as item (item.key)}
<div class="item"></div>
{/each}
</MasonryInfiniteGrid>
Wait Data Loading
Use wait & ready
If you want to add items asynchronously, call the e.wait
function and when the data is ready call the e.ready
function.
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Svelte
ig.on("requestAppend", e => {
const nextGroupKey = (+e.groupKey || 0) + 1;
e.wait();
setTimeout(() => {
e.ready();
ig.append(getItems(nextGroupKey, 10), nextGroupKey);
}, 1000);
});
const [items, setItems] = React.useState([]);
<MasonryInfiniteGrid
onRequestAppend={(e) => {
const nextGroupKey = (+e.groupKey! || 0) + 1;
e.wait();
setTimeout(() => {
e.ready();
setItems([
...items,
...getItems(nextGroupKey, 10),
]);
}, 1000);
}}>
{items.map((item) => <Item data-grid-groupkey={item.groupKey} key={item.key} num={item.key} />)}
</MasonryInfiniteGrid>
export default {
data() {
return {
items: [],
},
},
methods: {
onRequestAppend(e) {
const nextGroupKey = (+e.groupKey! || 0) + 1;
e.wait();
setTimeout(() => {
e.ready();
this.items = [
...this.items,
...getItems(nextGroupKey, 10),
];
}, 1000);
},
};
export default {
data() {
return {
items: [],
},
},
methods: {
onRequestAppend(e) {
const nextGroupKey = (+e.groupKey! || 0) + 1;
e.wait();
setTimeout(() => {
e.ready();
this.items = [
...this.items,
...getItems(nextGroupKey, 10),
];
}, 1000);
},
};
export default class App {
items = [];
onRequestAppend(e) {
const nextGroupKey = (+e.groupKey! || 0) + 1;
e.wait();
setTimeout(() => {
e.ready();
this.items = [
...this.items,
...getItems(nextGroupKey, 10),
];
}, 1000);
}
};
<script>
let items = [];
</script>
<MasonryInfiniteGrid
on:requestAppend={({ detail: e }) => {
e.wait();
setTimeout(() => {
e.ready();
items = [
...items,
...getItems(nextGroupKey, 10),
];
}, 1000);
}}>
{items.map((item) => <Item data-grid-groupkey={item.groupKey} key={item.key} num={item.key} />)}
</MasonryInfiniteGrid>
Use Placeholder
You can add placeholders to show instead while data is being loaded/added. The placeholder is placed on the grid instead of the actual item and can be maintained until the actual item is added.
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Svelte
You can set a placeholder through the ig.setPlaceholder
method.
ig.setPlaceholder({
html: `<div class="placeholder"></div>`,
});
ig.on("requestAppend", e => {
const nextGroupKey = (+e.groupKey || 0) + 1;
e.wait();
e.currentTarget.appendPlaceholders(5, nextGroupKey);
setTimeout(() => {
e.ready();
ig.append(getItems(nextGroupKey, 10), nextGroupKey);
}, 1000);
});
You can set the placeholder via the placeholder prop.
const [items, setItems] = React.useState([]);
<MasonryInfiniteGrid
placeholder={<div className="placeholder"></div>}
onRequestAppend={(e) => {
const nextGroupKey = (+e.groupKey! || 0) + 1;
e.wait();
e.currentTarget.appendPlaceholders(5, nextGroupKey);
setTimeout(() => {
e.ready();
setItems([
...items,
...getItems(nextGroupKey, 10),
]);
}, 1000);
}}>
{items.map((item) => <Item data-grid-groupkey={item.groupKey} key={item.key} num={item.key} />)}
</MasonryInfiniteGrid>
A placeholder can be set via a placeholder slot.
<masonry-infinite-grid
@request-append="onRequestAppend">
<div
class="item"
v-for="item in items"
:key="item.key"
:data-grid-groupkey="item.groupKey"
></div>
<template v-slot:placeholder="{ item }">
<div
class="placeholder"
:key="item.key"
:data-grid-groupkey="item.groupKey"
></div>
</template>
</masonry-infinite-grid>
export default {
data() {
return {
items: [],
},
},
methods: {
onRequestAppend(e) {
const nextGroupKey = (+e.groupKey! || 0) + 1;
e.wait();
e.currentTarget.appendPlaceholders(5, nextGroupKey);
setTimeout(() => {
e.ready();
this.items = [
...this.items,
...getItems(nextGroupKey, 10),
];
}, 1000);
},
};
A placeholder can be set via a placeholder slot.
<masonry-infinite-grid
@request-append="onRequestAppend">
<div
class="item"
v-for="item in items"
:key="item.key"
:data-grid-groupkey="item.groupKey"
></div>
<template v-slot:placeholder="{ item }">
<div
class="placeholder"
:key="item.key"
:data-grid-groupkey="item.groupKey"
></div>
</template>
</masonry-infinite-grid>
export default {
data() {
return {
items: [],
},
},
methods: {
onRequestAppend(e) {
const nextGroupKey = (+e.groupKey! || 0) + 1;
e.wait();
e.currentTarget.appendPlaceholders(5, nextGroupKey);
setTimeout(() => {
e.ready();