jQuery 瀑布流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;padding: 0px;
}
.pubu{
width: 800px;
position: relative;
margin: 0px auto;
}
.pubu .box{
width: 250px;
position: absolute;
top: 0px;
left: 0px;
border: 5px solid black;
border-radius: 10px;
background: yellow;
}
img{
width: 250px;
}
</style>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
window.onload=function(){
var boxlis=$(".box").length
console.log(boxlis)
for(var i=0;i<boxlis;i++){
var left=i%3*270
var sum=0;
for(var j=i-3;j>=0;j=j-3){
console.log(j)
sum=sum+$(".box").eq(j).height()+20;
}
$(".box").eq(i).css({"left":left,"top":sum})
}
}
</script>
</head>
<body>
<div class="pubu">
<div class="box">
<p><img src="p1.jpg"></p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
<div class="box">
<p><img src="p1.jpg"></p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
<div class="box">
<p><img src="p1.jpg"></p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
<div class="box">
<p><img src="p1.jpg"></p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
<div class="box">
<p><img src="p1.jpg"></p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
<div class="box">
<p><img src="p1.jpg"></p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
<div class="box">
<p><img src="p1.jpg"></p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
<div class="box">
<p><img src="p1.jpg"></p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
<div class="box">
<p><img src="p1.jpg"></p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
</div>
</body>
</html>图片：
p1.jpg
641
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
