가로로 길이가 긴 이미지보다는 세로로 길이가 긴 이미지(웹툰, 인포그래피 등)가 많은 요즘 상황에 딱 알맞은 레이아웃인 듯 합니다.
보기도 깔끔하고... 해서 이와 같은 레이아웃을 구현해 봤습니다. 아래가 제가 구현한 예시구요.
원래는 브라우져의 크기가 변함에 따라 레이아웃도 자동으로 변화해야 하지만....
블로그 내에서는 해당 방식의 적용이 안되 약간의 수정을 가한상태입니다.
한번 브라우져 창의 크기를 조절해 보시면 창 크기에 비례해서 이미지 배열이 바뀌는 것을 확인 하실 수 있습니다.
댓글 or 주석란 Test
댓글 or 주석란 Test
줄바꿈
줄바꿈
줄바꿈
줄바꿈
줄바꿈
줄바꿈
댓글 or 주석란 Test
댓글 or 주석란 Test - 자동 줄바꿈. 자동 줄바꿈. 자동 줄바꿈. 자동 줄바꿈.
댓글 or 주석란 Test
댓글 or 주석란 Test
댓글 or 주석란 Test
댓글 or 주석란 Test
댓글 or 주석란 Test
댓글 or 주석란 Test
코드 접기
<div id="PinWrapper">
<center>
<div id="PinImages">
<div class="PinDiv" >
<div class="PinImageDiv">
<img class="PinImage" border="0" height="107" src="http://media-cache1.pinterest.com/upload/69805862944403213_qBHpqC9R_b.jpg" width="192" /></div>
<div class="PinComment" >댓글 or 주석란 Test</div></div>
<div class="PinDiv" >
<div class="PinImageDiv">
<img class="PinImage" border="0" height="192" src="http://media-cache1.pinterest.com/upload/95631192057608252_OdggmpgT_b.jpg" width="192" /></div>
<div class="PinComment" >댓글 or 주석란 Test<br/>줄바꿈<br/>줄바꿈<br/>줄바꿈<br/>줄바꿈<br/>줄바꿈<br/>줄바꿈</div></div>
<div class="PinDiv" >
<div class="PinImageDiv">
<img class="PinImage" border="0" height="284" src="http://media-cache5.pinterest.com/upload/211174952698746_2XRHvsMZ_b.jpg" width="192" /></div>
<div class="PinComment" >댓글 or 주석란 Test</div></div>
<div class="PinDiv" >
<div class="PinImageDiv">
<img class="PinImage" border="0" height="127" src="http://media-cache4.pinterest.com/upload/189362359302151278_XQTu5Z45_b.jpg" width="192" /></div>
<div class="PinComment" >댓글 or 주석란 Test - 자동 줄바꿈. 자동 줄바꿈. 자동 줄바꿈. 자동 줄바꿈.</div></div>
<div class="PinDiv" >
<div class="PinImageDiv">
<img class="PinImage" border="0" height="286" src="http://media-cache6.pinterest.com/upload/41025046575158732_lNqgvX57_b.jpg" width="192" /></div>
<div class="PinComment" >댓글 or 주석란 Test</div></div>
<div class="PinDiv" >
<div class="PinImageDiv">
<img class="PinImage" border="0" height="266" src="http://media-cache5.pinterest.com/upload/82050024430982035_OO4DfduI_b.jpg" width="191" /></div>
<div class="PinComment" >댓글 or 주석란 Test</div></div>
<div class="PinDiv" >
<div class="PinImageDiv">
<img class="PinImage" border="0" height="144" src="http://media-cache6.pinterest.com/upload/275915914640767159_LhSa1yff_b.jpg" width="192" /></div>
<div class="PinComment" >댓글 or 주석란 Test</div></div>
<div class="PinDiv" >
<div class="PinImageDiv">
<img class="PinImage" border="0" height="397" src="http://media-cache1.pinterest.com/upload/149885493818566280_SuZwvxni_b.jpg" width="191" /></div>
<div class="PinComment" >댓글 or 주석란 Test</div></div>
<div class="PinDiv" >
<div class="PinImageDiv">
<img class="PinImage" border="0" height="127" width="192" src="http://media-cache0.pinterest.com/upload/275915914640761353_I9K5Bm52_b.jpg" /></div>
<div class="PinComment" >댓글 or 주석란 Test</div></div>
<div class="PinDiv" >
<div class="PinImageDiv">
<img class="PinImage" border="0" height="301" width="191" src="http://media-cache8.pinterest.com/upload/287315651197265052_PmMT8tYs_b.jpg" /></div>
<div class="PinComment" >댓글 or 주석란 Test</div></div>
</div>
</center>
</div>
위와 같이 정렬이 안된 html를 정렬 시켜 보겠습니다.
우선 id가 "PinWrapper"인 <div>태그와 안에 가운데 정렬을 위한 <center>태그,
그리고 그 안에 id가 "PinImages"인 태그,
그리고 그 안에 각각의 이미지(class="PinImage")와 댓글&주석란(class="PinComment")을 감싸고 있는 <div>태그(class = "PinDiv")들이 있습니다.
이 중 class가 "PinDiv"인 <div>태그들을 정렬 시켜 보겠습니다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var AlignPin = {
init : function(wrapper, div, img, width, space){
this.wrapper = wrapper;
this.div = div;
this.img = img;
this.width = width;
this.space = space;
this.cnt = 0;
this.line = 0;
this.wrapper[0].style.position = 'relative';
},
/* 넓이에 따라 가로 열의 수를 설정하고 해당 수 만큼 초기화함. */
set : function(width){
for(var i=0; i< this.img.length; i++)
AlignPin.changeWidth(this.img[i]);
var line = parseInt(width/(this.width + this.space));
this.wrapper[0].style.width = line * (this.width + this.space) - this.space + 'px';
if(this.line != line){
this.p = new Array();
for(var i=0; i< line; i++){
this.p[i] = {x:i*(this.width+this.space), y:0};
}
}
for(var i=0; i< this.div.length; i++)
this.setImage(i);
this.cnt = this.div.length;
/* wrapper 최종 높이 설정. */
var max = this.p[0].y;
for(var i=1; i< this.p.length; i++)
if(this.p[i].y > max)
max = this.p[i].y;
this.wrapper[0].style.height = max - this.space + 'px';
},
/* 이미지 배치. */
setImage : function(n){
this.div[n].style.position = 'absolute';
this.div[n].style.width = this.width + 'px';
var min = this.p[0].y;
var v = 0;
for(var i=1; i< this.p.length; i++){
if(this.p[i].y < min){
v = i;
min = this.p[i].y;
}
}
this.div[n].style.left = this.p[v].x + 'px';
this.div[n].style.top = this.p[v].y + 'px';
this.p[v].y += this.div[n].offsetHeight + this.space;
},
/* 이미지 넓이 조정. */
changeWidth : function(img){
var width = this.width - 2*this.space;
var w = img.offsetWidth;
var h = img.offsetHeight;
var aspect = h/w;
img.style.width = width + 'px';
img.style.height = width * aspect + 'px';
}
}
$(function(){
AlignPin.init($('#PinImages'),$('.PinDiv'), $('.PinImage'), 200, 15);
AlignPin.set($('#PinWrapper')[0].offsetWidth);
window.onresize = function(){
AlignPin.set($('#PinWrapper')[0].offsetWidth);
}
});
</script>
가장 마지막 $(function(){}) 부분을 보시면...
AlignPin.init($('#PinImages'),$('.PinDiv'), $('.PinImage'), 200, 15);
에서 Image들을 전체적으로 감싸고 있는 태그와, 각각의 이미지를 감싸고 있는 태그, 그리고 이미지 태그들을 넘겨주고, 넓이는 200px, 각 이미지간의 공간을 15px로 설정합니다.
다음
AlignPin.set($('#PinWrapper')[0].offsetWidth);
에서 현재 화면의 넓이를 넘겨줌으로써 해당 넓이를 분단하여 이미지를 감싸고 있는 태그들의 넓이를 설정해줍니다.
마지막
window.onresize = function(){ AlignPin.set($('#PinWrapper')[0].offsetWidth); }
에서는 브라우져의 크기가 리사이즈가 될때마다 set() 함수를 다시 불러주면서 재 정렬을 시켜주도록 합니다.
이렇게만하면 원하는 기능은 구현이 끝나구요. 여기에 CSS를 입혀 좀더 디자인을 깔끔하게 할 수 있습니다.
아래는 제 CSS의 예.
<style>
#PinWrapper{
position: relative;
background : #faf7f7;
padding : 10px;
}
.PinDiv{
/* shadow */
box-shadow:0px 1px 3px silver; /* Opera */
-moz-box-shadow:0px 1px 3px silver; /* Firefox */
-webkit-box-shadow:0px 1px 3px silver; /* Safiri, Chrome */
filter:progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=180,strength=6); /* IE */
}
.PinImageDiv{
background : white;
padding : 15px;
}
.PinComment{
text-align: left;
word-break:break-all;
padding : 5px;
background : #f9f5f5;
}
</style>
제일 초기에 height 값을 적용 할 수는 없나요?
답글삭제지금은 하드코딩으로 이미지 height 값이 주어 져 있네요..
자동으로 할 수는 없나요? ㅠ
샘플 이미지를 그대로 핀터레스트에서 긁어왔더니 그런가 보군요.
삭제자동으로 이미지 url만 있으면 원본 width, height 를 불러와서 할 수 없냐는 말씀이시죠? 물론 가능합니다.
위쪽 3개의 메뉴 중에 Gallery 가 피카사에 이미지를 자동으로 불러와서 pinterest 식의 레이아웃을 입힌 건데요.
약간 문제가 있어서 제대로 width/height 값을 못 불러 오는 경우도 있긴 하네요.
이 점은 추후에 수정해야 할 듯 하지만.... 아무튼 가능은 할 듯 합니다.
감사합니다 궁금했던것을 알아가네요.....
답글삭제이런 식으로 구현 되어 있다는게 아니라 이런 식으로도 만들 수 있다거라서요. ^^
삭제말씀대로 약간 문제가 있습니다
답글삭제길이값을 잘 못가져 오네요
수정하셨다면 알려 주시면 고맙겟습니다
아니면 참고 url 이라도 ..ㅋㅋ 부탁 드립니다
죄송합니다. 아직 수정된 것은 없네요..
삭제블로그에 신경을 계속 못쓰고 있어 이렇게 가끔 들어와서 댓글 다는게 다네요.;;;