이미지 벽돌쌓기 - masonry > jquery 플러그인

본문 바로가기
사이트 내 전체검색


회원로그인

최신 게시글
  • 게시물이 없습니다.

jquery 플러그인

 > 개발자료 > jquery 플러그인

jquery 플러그인

레이아웃 | 이미지 벽돌쌓기 - masonry

페이지 정보

작성자 YJNet 작성일14-11-17 18:12 조회12,647회 댓글0건

본문

DOWNLOAD DEMO
Masonry는 벽돌쌓기 모양으로 이미지를 배열해 주는 자바스크립트 라이브러리 입니다.
- 반응형웹
- 매트로 UI
 
 
 
<예제>
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <style>
      .item {
        width:150px; height:150px; float:left; margin:5px;
        background-color: #c92190;
      }
    </style>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js"></script>
  </head>
  <body>
    <div id="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
      <div class="item">11</div>
      <div class="item">12</div>
      <div class="item">13</div>
      <div class="item">14</div>
      <div class="item">15</div>
    </div>
    <script>
      var container = document.querySelector( '#container' );
      var msnry = new Masonry( container, {
        // options
        columnWidth: 160,
        itemSelector: '.item',
      } );
    </script>
  </body>
</html>

댓글목록

등록된 댓글이 없습니다.

jquery 플러그인 목록

Total 46건 1 페이지
게시물 검색

접속자집계

오늘
378
어제
485
최대
4,468
전체
1,797,402
그누보드5
회사소개 개인정보취급방침 서비스이용약관    Copyright © www.g-it.kr. All rights reserved.