jquery实现的流式布局
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.main{
width: 1200px;
border: 1px solid orange;
position: relative;
margin: 10px auto;
}
.box{
float: left;
padding: 15px 0 0 15px;
}
.pic{
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
.pic img{
width: 162px;
height: auto;
}
</style>
</head>
<body>
<div class="main">
<div class="box">
<div class="pic">
<img src="images/0.jpg" alt=""/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/1.jpg" alt=""/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.jpg" alt=""/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg" alt=""/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg" alt=""/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.jpg" alt=""/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.jpg" alt=""/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.jpg" alt=""/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/8.jpg" alt=""/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/9.jpg" alt=""/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/10.jpg" alt=""/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/11.jpg" alt=""/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/12.jpg" alt=""/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/13.jpg" alt=""/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/14.jpg" alt=""/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/15.jpg" alt=""/>
</div>
</div>
</div>
<script src="jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(function () {
var sizeP=$('div.box').length;
var arrH=[];
for(var i=0;i<sizeP;i++){
if(i<6){
arrH.push($('div.box').get(i).offsetHeight);
}else{
var minx=Math.min.apply(Math,arrH);
var indexmin=arrH.indexOf(minx);
console.log(indexmin);
$('div.box').eq(i).css('position','absolute');
var left=$('div.box').eq( indexmin ).position().left
console.log(left+'left')
$('div.box').eq(i).css('left',left);
$('div.box').eq(i).css('top',minx);
arrH[indexmin]=minx+$('div.box').get(i).offsetHeight
}
}
console.log(arrH)
})
</script>
</body>
</html>
版权声明：本文为博主原创文章，未经博主允许不得转载。
