jQuery 플러그인을 사용해 그리드 레이아웃 만들기

vGrid 플러그인을 사용한 카드 UI : 그리드 레이아웃을 쉽게 만드는 플러그인으로, 브라우저 화면 크기에 따라 화면 요소의 위치를 동적으로 옮겨준다.

1. github.com/xlune/jQuery-vGrid-Plugin 사이트 접속 - 소스 파일 중 jQuery.vgrid.min.js파일을 원하는 폴더로 복사

2. <script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.vgrid.min.js"></script>삽입

3. #container라는 부모 요소를 만들고 <div> 삽입. <div>마다 이미지와 제목 텍스트, 이미지 설명 텍스트

<div id="container">
    <div>
        <img src="">
        <h2></h2>
        <p></p>
    </div>
        <div>
        <img src="">
        <h2></h2>
        <p></p>
    </div>
        <div>
        <img src="">
        <h2></h2>
        <p></p>
    </div>
        <div>
        <img src="">
        <h2></h2>
        <p></p>
    </div>
</div>

<script>
        $("#container").vgrid({
            time:400,       // 애니메이션 실행 시간
            delay:30,       // 애니메이션 지연 시간
            wait:500        // 애니메이션 대기 시간
        });
   </script>