[자바스크립트 플러그인]그리드 관련 플러그인 Muuri

https://haltu.github.io/muuri/

Muuri - Responsive, sortable, filterable and draggable grid layouts

 

옵션관련한 문서 

https://github.com/haltu/muuri#muuri

haltu/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/

Muuri - a Collection by Niklas Rämö on CodePen

여기에 다양한 예제가 있어서 필요한 레이아웃형태를 가져와 수정해서 쓰면될거 같다.