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

More Related Content

Viewers also liked

More from seoultech,Design, Jung Hoe Jun

Masonry