Make Pinterest Layout with eg.InfiniteGrid 3.4
InfiniteGrid는 레이아웃 유형에 따라 무한 개의 카드를 정렬하는 모듈입니다. 이 모듈을 사용하면 크기가 다른 카드들을 다양한 레이아웃으로 배치할 수 있습니다. 또한 어떠한 경우에도 모듈이 처리하는 DOM의 수를 유지함으로써 성능을 보장할 수 있습니다.
InfiniteGrid is A module used to arrange card elements including content infinitely according to layout type. With this module, you can implement various layouts composed of different card elements whose sizes vary. It guarantees performance by maintaining the number of DOMs the module is handling under any circumstance.
GridLayout은 너비가 같은 아이템들을 정렬하는 레이아웃입니다. 대표적인 예가 Pinterest의 카드형 UI입니다.
새롭게 추가된 isConstantSize option은 화면 크기 변화와 상관없이 아이템의 크기를 유지할 수 있습니다. GridLayout에 isConstantSize 옵션을 tru로 지정하면 DOM Recycle을 사용하여 성능이 강화된 Pinterest 레이아웃을 만들 수 있습니다.
isConstantSize 옵션은 GridLayout이 아닌 다른 레이아웃을 사용하는 경우라도 아이템 사이즈의 크기가 변하지 않는다면 사용하실 수 있습니다.
const ig = new eg.InfiniteGrid(".viewer", {
isConstantSize: true,
});
ig.setLayout(eg.InfiniteGrid.GridLayout);
ig.layout(true);transitionDuration option을 지정하면 화면의 크기 변경시 아이템의 위치와 크기 변화가 애니메이션 되어 컨텐츠에 생동감을 줄 수 있습니다.
const ig = new eg.InfiniteGrid(".viewer", {
transitionDuration: 0.2,
});
ig.setLayout(eg.InfiniteGrid.GridLayout);
ig.layout(true);InfiniteGrid는 2가지 버전의 React 컴퍼넌트를 지원합니다.
- react-infinitegrid는 InfiniteGrid의 React 컴퍼넌트
- react-layout은 InfiniteGrid의 5가지 레이아웃 기능만 제공하는 React용 레이아웃 전용 컴퍼넌트
항상된 편의성을 제공하기 위해 다음과 같은 작업들을 진행 중입니다.
-
size와 position의 퍼센트 단위 지원
-
리액트 컴퍼넌트 아이템같은 Template 지원
-
FrameLayout의 다양한 사이즈 지원
-
Percentage with size or position
-
Template like React Component Item
-
Improve FrameLayout
더 멋진 모습으로 돌아올 다음 릴리즈를 기대 해주세요.