Make Pinterest Layout with eg.InfiniteGrid 3.4|한국어
InfiniteGrid는 레이아웃 유형에 따라 무한 개의 카드를 정렬하는 모듈입니다. 이 모듈을 사용하면 크기가 다른 카드들을 다양한 레이아웃으로 배치할 수 있습니다. 또한 어떠한 경우에도 모듈이 처리하는 DOM의 수를 유지함으로써 성능을 보장할 수 있습니다.
GridLayout은 너비가 같은 아이템들을 정렬하는 레이아웃입니다. 대표적인 예가 Pinterest의 카드형 UI입니다.
새롭게 추가된 isConstantSize 옵션은 화면 크기 변화와 상관없이 아이템의 크기를 유지할 수 있습니다. GridLayout에 isConstantSize 옵션을 true로 지정하면 DOM Recycle을 사용하여 성능이 강화된 Pinterest 레이아웃을 만들 수 있습니다.
isConstantSize 옵션은 GridLayout이 아닌 다른 레이아웃을 사용하는 경우라도 아이템 사이즈의 크기가 변하지 않는다면 사용하실 수 있습니다.
const ig = new eg.InfiniteGrid(".viewer", {
isConstantSize: true,
});
ig.setLayout(eg.InfiniteGrid.GridLayout);
ig.layout(true);transitionDuration 옵션을 지정하면 화면의 크기 변경시 아이템의 위치와 크기 변화가 애니메이션 되어 컨텐츠에 생동감을 줄 수 있습니다.
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의 다양한 사이즈 지원
더 멋진 모습으로 돌아올 다음 릴리즈를 기대 해주세요.