masonry란 벽돌로 건축하는것는 것을 뜻한다.
원본 : http://desandro.com/demo/masonry/docs/ (라이센스는 jquery 에 있다고 명시되어 있다.)
The MIT License
문단을 위와 같이 벽돌 모양으로 하는 것. jquery 를 하다가 잼있는 라이블러리를 찾아서 해볼려고 한다.
Copyright © 2010 David DeSandro
아래 그림을 보는게 훨신 빠르겠다.
(실패 할수도 잇음..;; 아직 않해봐서 실시간으로 해서 올리는중?)
먼저 css만으로 문단으로 나눠 보았다.
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.wrap {
background: #FFF;
border: 0px solid #456;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
clear: both;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.wrap:after,
#tumblelog:after,
#filtering-nav:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.box {
margin: 5px;
padding: 5px;
background: #D8D5D2;
font-size: 11px;
float: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.col1 { width: 80px; }
.col2 { width: 180px; }
.col3 { width: 280px; }
.col4 { width: 380px; }
.col5 { width: 480px; }
.col1 img { max-width: 80px; }
.col2 img { max-width: 180px; }
.col3 img { max-width: 280px; }
.col4 img { max-width: 380px; }
.col5 img { max-width: 480px; }
* {
margin: 0;
padding: 0;
}
body {
font: 13px 'Helvetica Neue', Arial, sans-serif;
background: #D8D5D2;
color: #222;
}
a {
color: #A2C;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #D26;
}
h1, h2 {
font-weight:100;
}
h1 {
font-size: 36px;
}
h1, h2, h3, p, ul, ol, pre, dl {
margin-bottom: 1.0em;
}
#comparison .example {
width: 420px;
float: left;
margin-right: 20px;
}
#comparison .box h5 {
float: left;
margin-bottom: 0;
font-size: 30px;
margin-right: 4px;
line-height: 28px;
font-weight: bold;
color: #FFF;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<div id="comparison">
<div class="example">
<h3>Masonry</h3>
<div id="secondary" class="wrap">
<div class="box col1">
<h5>1</h5>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris. </p>
</div>
<div class="box col2">
<h5>2</h5>
<p>Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit.</p>
</div>
<div class="box col1">
<h5>3</h5>
<p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Ut eget sem risus, et posuere velit. Aenean ac mauris non ligula. </p>
</div>
<div class="box col1">
<h5>4</h5>
<p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus.</p>
</div>
<div class="box col1">
<h5>5</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p>
</div>
<div class="box col1">
<h5>6</h5>
<p>Cadipiscing in, lacinia vel, tellus. </p>
</div>
<div class="box col1">
<h5>7</h5>
<p>Pellentesque a diam sit amet mi ullamcorper vehicula. adipiscing in, lacinia vel, tellus.</p>
</div>
<div class="box col3">
<h5>8</h5>
<p>Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Suspendisse ac urna. Etiam pellentesque. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl. Suspendisse ac urna. Etiam pellentesque. </p>
</div>
<div class="box col2">
<h5>9</h5>
<p>Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Pellentesque a diam sit amet mi ullamcorper vehicula. adipiscing in, lacinia vel, tellus.</p>
</div>
<div class="box col1">
<h5>10</h5>
<p>Etiam pellen tesque mauris ut lectus.</p>
</div>
<div class="box col1">
<h5>11</h5>
<p>Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspen disse ac urna. Ut condi mentum mi vel tellus.</p>
</div>
<div class="box col1">
<h5>12</h5>
<p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p>
</div>
</div> <!-- /#secondary.wrap -->
</div>
</div>
</body>
</html>
문단(<div>)의 설정상 각 고유의 영역을 가지게 된다. 가장 큰 영역을 기준으로 나뉘기 때문에 위와 같이 공백이 생기게 된다. 이제 간단하게 jquery 을 통해서 처음 봤던 벽돌 모양으로 만들어 본다.
http://desandro.com/resources/jquery-masonry/ 에서 js 파일을 다운 받아 보일려는 페이지와 동일한 디렉토리에 넣은 다음 아래의 코드만 추가 하면 된다.
<script src="./jquery.masonry.js"></script>
<script>
$(function(){
$('#secondary').masonry({columnWidth: 100});
});
</script>
- 소스
masonry.jsp예제에 미디어와 문단별 구분도 있는데 다음 포스팅은 그걸로 해야겠다.
정말..jquery 는....대박이다.
'web > jQuery' 카테고리의 다른 글
| jquery-number 를 이용하여 천 단위 콤마 간단히 찍기 (2) | 2012.11.16 |
|---|---|
| jquery 체크박스를 통한 내용 복사 (0) | 2011.02.01 |
| jQuery hide() show() (0) | 2011.01.13 |
| jQuery after() prepend() (0) | 2011.01.11 |
| jQuery click() (0) | 2011.01.10 |
