Masonry

Masonry
Cascading grid layout library
(벽돌 쌓기 모양으로 요소를 배열해주는 라이브러리)

http://masonry.desandro.com/
http://desandro.com/masonry

Masonry는 벽돌 쌓기 모양으로 요소를 배열해주는 자비스
크립트 라이브러리.
Masonry를 이용하면 이미지를 배열하거나 썸네일이 있는
글목록을 박스처럼 나타낼 수 있다.
웹브라우저의 가로폭이 변하면 그에 맞게 배열이 바뀌어
반응형웹에서도 사용하기 좋다.
http://www.cmsfactory.net/node/10403

다운로드
http://masonry.desandro.com/#install
스크립트를 수정할 것이라면 masonry.pkgd.js를, 그대로 사용할 것이라면 masonry.pkgd.min.js를 다운로
드 받습니다.
사용법
다운로드 받은 파일을 서버에 업로드하고, HTML 문서에서 불러옵니다.
<script src="masonry.pkgd.min.js"></script>
Div 구성 및 class 설정
Masonry 배열을 할 요소를 적당한 이름의 id를 부여한 요소로 둘러싸고, 배열할 요소에 적당한 이름의
class를 부여합니다.
Div 구성 및 class 설정
Masonry 배열을 할 요소를 적당한 이름의 id를 부여한 요소로 둘러싸고, 배열할 요소에 적당한 이름의
class를 부여합니다.
<div id="container">
<div class="item">Lorem</div>
<div class="item">Ipsum</div>
</div>

Css 설정
배열할 요소의 가로폭을 정하고, float 속성을 부여합니다.
.item { width: 100px; float: left; }
Script 설정
문서가 끝나는 곳에 스크립트 실행을 위한 코드를 넣습니다.
<script>
var container = document.querySelector( '#container' );
var msnry = new Masonry( container, {
// options
columnWidth: 100,
itemSelector: '.item',
} );
</script>

head 태그 구성
jQuery 플러그인이므로 jQuery.js 파일을 추가한 이후에 masonry-docs.min.js 파일을
추가한다.
<head>
<title>jQuery Masonry 플러그인</title>
<style>
</style>
<script src = "./js/jQuery-1.7.js"></script>
<script src = "./js/masonry-docs.min.js"></script>
<script>
$(document).ready(function () {
});
</script>
</head>
http://wickedmagic.tistory.com/314

불규칙한크기의 박스는 어떻게 정렬
<body>
<div id = "masonry_container">
<div class = "item small"></div>
<div class = "item big"></div>
<div class = "item normal"></div>
</div>
</body>
http://wickedmagic.tistory.com/314
body 태그 구성

$(selector).masonry( ) 메서드
-. Masonry 플러그인의 핵심 메서드는 masonry( )이다.
-. masonry( ) 메서드의 옵션중 itemSelector 옵션 속성과 columnWidth 옵션
속성은 반드시 지정해야 한다.
<script>
$(document).ready(function () {
$('#masonry_container').masonry({
itemSelector : '.item',
columnWidth : 110
});
});
</script>

<div class = "item">
<img src = "./image/cj1.jpg"/>
<div class = "bottom">
<img src = "./image/top.png" />
<p>consectetur adipiscing elit</p>
</div>
</div>
.item {
width : 150px;
margin : 10px;
background-color : White;
border-radius : 4px;
float : left;
box-shadow : 5px 5px 10px Black;
}
.item > .bottom {
padding-left : 10px;
padding-right : 10px;
position : relative;
bottom : 18px;
}
.item > .bottom > img {
position : relative;
left : 21px;
}
http://aboooks.tistory.com/82 css position 설명

Masonry

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Masonry

Similar to Masonry (20)

More from seoultech,Design, Jung Hoe Jun

More from seoultech,Design, Jung Hoe Jun (20)

Masonry