用jquery写的position瀑布流布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pin{
padding: 15px 0 0 15px;position: absolute;
}
.box{
padding: 10px;
border:1px solid #ccc;}
.box img{
width:100px;
height:auto;}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div id="main">
<div class="pin">
<div class="box">
<img src="img/1.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/2.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/44.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/44.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/44.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/44.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/44.png"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/nav60.png"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/mazha.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/nav60.png"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/22.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/33.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/nav60.png"/>
</div>
</div> <div class="pin">
<div class="box">
<img src="img/4.jpg"/>
</div>
</div>
<div>
<script>
window.onload=function(){
var screenWidth=$(window).width();
console.log("屏幕宽度："+screenWidth);
var cloumnNum= Math.floor(screenWidth/($('.pin').width())) ;
console.log(cloumnNum)
var cloumnHeight=[];
for(var i=0;i<cloumnNum;i++){
cloumnHeight.push(0)
}
console.log(cloumnHeight)
$("#main .pin").each(function(index){
var elementHeight=$(this).height();
var elementWidth=$(this).width();
console.log(index%(cloumnHeight.length))
$(this).css("left",(index%(cloumnHeight.length))*elementWidth).css("top",(cloumnHeight[index%(cloumnHeight.length)]))
cloumnHeight[index%(cloumnHeight.length)]+=elementHeight;
console.log(cloumnHeight)
})
}
</script>
</body>
</html>
请爱好前端技术的朋友，联系我，有问题大家一起讨论
