css:
#main{
width:956px;
height: auto;
margin: 10px auto 0px auto;
border:2px solid #ccc;
float:left;
position:relative;
}
#main .pin{
width:220px;
height:auto;
padding:15px 0px 0px 15px;
float:left;
}
#main .pin .box{
width:203px;
height:auto;
padding:10px;
border:1px solid #333;
box-shadow:0px 0px 5px #333;
}
#main .pin .box img{
width:100%;
}
jquery:如果你想测试请将第一行function waterfall()换成$(function(){})再运行,我这里将其封装成函数;
//瀑布流
function waterfall(){
var apin = $('#main .pin');
var oparent = $('#main');
var pos=[];
apin.each(function(i){
//4是第一排的元素个数
if(i<4){
//将第一排的高度存入到数组中
pos[i] = apin.eq(i).innerHeight();
}else{
//按照瀑布流定位
//获取数组中的最小值
var minh = Math.min.apply({},pos);
//获取高度最小的键名
var mink = getMinKey(pos,minh);
//获取高度最小的距离左边的距离
var minl = apin[mink].offsetLeft;
//定位元素位置
apin.eq(i).css({
position:'absolute',
top:minh,
left:minl
});
//将加入的元素与其上面元素的高度相加,为下面元素排列做准备
pos[mink] +=apin.eq(i).innerHeight();
}
});
//设置最外容器的高以适应内容的变化
var maxh = Math.max.apply({},pos)+10;
oparent.css('height',maxh)
}
//获取数组中最小元素的键名
function getMinKey(arr,min){
for(var key in arr){
if(arr[key]==min){
return key;
}
}
}
html:
<div id="main">
<div class="pin">
<div class="box">
<img src="./11.jpg"></img>
</div>
</div>
<div class="pin">
<div class="box">
<img src="./2.jpg"></img>
</div>
</div>
</div>