HTML代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>waterFall</title>
<link rel="stylesheet" href="wf.css">
<script src="jquery.js"></script>
<script src="wf.js"></script>
</head>
<body>
<div class="wrap">
<div class="box">
<img src="1.jpg" alt="">
<p>11111111111</p>
</div>
<div class="box">
<img src="2.jpg" alt="">
<p>22222222222</p>
</div>
<div class="box">
<img src="3.jpg" alt="">
<p>33333333333</p>
</div>
<div class="box">
<img src="4.jpg" alt="">
<p>44444444444</p>
</div>
<div class="box">
<img src="5.jpg" alt="">
<p>555555555555</p>
</div>
<div class="box">
<img src="6.jpg" alt="">
<p>666666666666</p>
</div>
<div class="box">
<img src="7.jpg" alt="">
<p>777777777777</p>
</div>
<div class="box">
<img src="8.jpg" alt="">
<p>8888888888888</p>
</div>
<div class="box">
<img src="9.jpg" alt="">
<p>99999999999</p>
</div>
</div>
</body>
</html>
js代码
$(function(){
$(‘img‘).load(function(){
var box = $(‘.box‘);
var boxHeight = {
leftBox:[],
centerBox:[],
rightBox:[]
}
for(var i = 0;i < box.length;i++){
var now = i%3; //now的值为0,1,2
switch(now){
case 0:
box.eq(i).css(‘left‘,‘10px‘);
boxHeight.leftBox.push(box.eq(i).height());
var now2 = Math.floor(i/3);
if(now2==0){
box.eq(i).css(‘top‘,‘0‘);
}else{
var total = 0;
for(var j=0;j<now2;j++){
total += boxHeight.leftBox[j]+10;
}
box.eq(i).css(‘top‘,total+‘px‘);
}
break;
case 1:
box.eq(i).css(‘left‘,‘270px‘);
boxHeight.centerBox.push(box.eq(i).height());
var now2 = Math.floor(i/3);
if(now2==0){
box.eq(i).css(‘top‘,‘0‘);
}else{
var total = 0;
for(var j=0;j<now2;j++){
total += boxHeight.centerBox[j]+10;
}
box.eq(i).css(‘top‘,total+‘px‘);
}
break;
case 2:
box.eq(i).css(‘left‘,‘530px‘);
boxHeight.rightBox.push(box.eq(i).height());
var now2 = Math.floor(i/3);
if(now2==0){
box.eq(i).css(‘top‘,‘0‘);
}else{
var total = 0;
for(var j=0;j<now2;j++){
total += boxHeight.rightBox[j]+10;
}
box.eq(i).css(‘top‘,total+‘px‘);
}
break;
}
}
});
});
CSS代码
*{
padding: 0;
margin: 0;
}
.wrap{
position: relative;
}
.box{
position: absolute;
left: 0;
top:0;
width: 250px;
}
.box img{width: 250px;}
jQuery实现瀑布流的简单方法
时间： 2024-10-06 00:28:12