728x90
반응형
https://haltu.github.io/muuri/
옵션관련한 문서
https://github.com/haltu/muuri#muuri
위에 문서에 잘 나와있지만 간단하게 살펴보았다..
var grid = new Muuri('.grid', {
//레이아웃 설정
layout: {
fillGaps: true,
horizontal: false, //true일 경우 가로(수평)로만 배치됨 (줄바꿈 x)
alignRight: false, //true일 경우 왼쪽부터 배치됨
alignBottom: false, // true일 경우 아래쪽 선에 맞춰 배치됨
rounding: false // true일 경우 크기 반올림해서 레이아웃 계산됨.. 정확한 값을 사용하려면 false
},
//보이는 그리드 아이템 스타일 설정
visibleStyles: {
opacity: 0.7,
background: 'gold'
},
//숨겨진 그리드 아이템 스타일 설정
hiddenStyles: {
opacity: 0.3,
transform: 'rotate(-45deg)'
},
//그리드 아이템이 나타나는 애니메이션
showDuration:500,
showEasing : 'linear',
//그리드 아이템이 숨겨지는 애니메이션
hideDuration: 300,
hideEasing:'ease',
// 드래그로 아이템 이동 가능 (드롭한 자리로 이동 -> 하나씩 위치 밀림)
dragEnabled: true,
});
https://codepen.io/collection/AWopag/
여기에 다양한 예제가 있어서 필요한 레이아웃형태를 가져와 수정해서 쓰면될거 같다.
728x90
반응형
'javascript > javascript' 카테고리의 다른 글
[javascript]소수점 반올림해서 n번째자리까지 출력하는 toFixed (0) | 2019.07.01 |
---|---|
[javascript]초성 중성 종성(자음/모음)모두 나눠 하나씩 타이핑 하는 효과 (0) | 2019.06.18 |
[자바스크립트 플러그인]쉽고 간단하게 스크롤 애니메이션 등록하기 WOW.js (0) | 2019.06.17 |
[javascript]체크박스(input[type="checkbox"]) 제어하기 (0) | 2019.06.14 |
[자바스크립트 플러그인]모바일 최적화(터치기능) 반응형 이미지 슬라이드 모달(팝업)창 플러그인 (0) | 2019.06.12 |
댓글