대충 만듬....
<!DOCTYPE>
<HTML>
<HEAD>
<TITLE> Div Resize </TITLE>
<script type="text/javascript" src="./js/jquery-1.9.0.min.js"></script>
<style>
div { border : 1px solid #ccc }
#row1 div {
position: absolute;
}
#row2 div {
position: absolute;
}
</style>
<script>
$(window).load(function(){
setSize();
});
$(window).resize(function(){
setSize();
});
function setSize() {
var cellLeft = null;
var rowHeight = null;
var rowTop = 0;
var rowWidth = $('#row1').innerWidth();
var rowNum = $("#wrapper").children().length;
var divNum = $("#row1").children().length;
for ( r = 1; r <= rowNum ; r++ )
{
cellLeft = 0;
$('#row'+r+' .quarter').css({'width':rowWidth/4} );
$('#row'+r+' .half').css({'width':rowWidth/2} );
for ( i = 1; i <= divNum ; i++ )
{
cellWidth = $('#row'+r+' .cell' + i).width();
$('#row'+r+' .cell'+i).css({left:cellLeft, top: rowTop});
cellLeft += cellWidth;
}
rowHeight = $('#row'+r+' .cell1').height();
rowTop += rowHeight;
}
}
</script>
</HEAD>
<BODY id ="body">
<div id="wrapper">
<div id="row1">
<div class="cell1 quarter">
<img class="quarter" src="11.jpg">
</div>
<div class="cell2 quarter">
<img class="quarter" src="22.jpg">
</div>
<div class="cell3 half">
<img class="half" src="33.jpg">
</div>
</div>
<div id="row2">
<div class="cell1 quarter">
<img class="quarter" src="11.jpg">
</div>
<div class="cell2 half">
<img class="half" src="33.jpg">
</div>
<div class="cell3 quarter">
<img class="quarter" src="22.jpg">
</div>
</div>
</div>
</BODY>
</HTML>
'JavaScript&Platform > jQuery' 카테고리의 다른 글
| [jQuery] table row 홀수, 짝수 배경색 지정하기 (0) | 2014.12.12 |
|---|---|
| [jQuery] 숫자 자동 증가 animation (0) | 2014.12.11 |
| [jQuery] jquery ajax (0) | 2013.04.08 |
| [jQuery] 버튼 + 이미지쇼 (0) | 2013.01.17 |
| [jQuery] Adipoli jQuery Image Hover Plugin (0) | 2012.11.22 |
