레이아웃 | 이미지 벽돌쌓기 - masonry
페이지 정보
작성자 YJNet 작성일14-11-17 18:12 조회12,647회 댓글0건본문
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>
<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>
댓글목록
등록된 댓글이 없습니다.