jQuery 瀑布流效果

代码完成的中心思想在代码中有注释。
另外,像jQuery3.0下这段代码无法使用,调试中用的是1.72版本。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>瀑布流</title>
		<script src="jquery.js"></script>
		
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.wrap{
				position: relative;
			}
			.box{
				position: absolute;
				left: 0;
				top: 0;
				width: 250px;		
			}
			.box img{
				width: 250px;
			}
		</style>
		
		<script>
			/*			 
			 * 一行显示三列,即一行显示三个box,我们用box.length来取值后排列的是
			 * 
			 * 	0	1	2
			 * 	3	4	5
			 * 	6	7	8
			 * ...后面的依此排列 
			 * 
			 * 我们用%取模发现
			 * 0%3 为0	1%3为1	2%3为2
			 * 3%3为0	4%3为1	5%3为2
			 * ...后面的依然依次
			 * 那么我们就看到最左列取模后的值为0,中间列为1,最右列为2
			 * 
			 * */
			$(function(){
				$('img').load(function(){
				//下面的代码在某些浏览器会出现还没加载完之后,就提前调用img,导致排版出错,所以我们加上了$('img').load(function(){
				var box = $('.box');
				//在循环时存储div的高度,分别存储左中右三列的
				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;	
									console.log('aa');
								}
								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;	
									console.log('aa');
								}
								box.eq(i).css('top',total+'px');
							}
							break;
					}
				}
				});
			});
		</script>
	</head>
	<body>
		<div class="wrap">
			<div class="box">
				<img src="myimages/a1.jpg" alt="" />
				<p>11111</p>
			</div>	
			<div class="box">
				<img src="myimages/a2.jpg" alt="" />
				<p>22222</p>
			</div>	
			<div class="box">
				<img src="myimages/a3.jpg" alt="" />
				<p>33333</p>
			</div>	
			<div class="box">
				<img src="myimages/a4.jpg" alt="" />
				<p>44444</p>
			</div>	
			<div class="box">
				<img src="myimages/a5.jpg" alt="" />
				<p>55555</p>
			</div>	
			<div class="box">
				<img src="myimages/a7.jpg" alt="" />
				<p>66666</p>
			</div>	
			<div class="box">
				<img src="myimages/a6.jpg" alt="" />
				<p>77777</p>
			</div>	
			<div class="box">
				<img src="myimages/a8.jpg" alt="" />
				<p>88888</p>
			</div>	
			<div class="box">
				<img src="myimages/a9.jpg" alt="" />
				<p>99999</p>
			</div>	
			<div class="box">
				<img src="myimages/a10.jpg" alt="" />
				<p>101010</p>
			</div>	
			<div class="box">
				<img src="myimages/a11.jpg" alt="" />
				<p>111111</p>
			</div>	
			<div class="box">
				<img src="myimages/a12.jpg" alt="" />
				<p>121212</p>
			</div>	
			<div class="box">
				<img src="myimages/a13.jpg" alt="" />
				<p>131313</p>
			</div>	
			<div class="box">
				<img src="myimages/a14.jpg" alt="" />
				<p>141414</p>
			</div>	
			<div class="box">
				<img src="myimages/a15.jpg" alt="" />
				<p>151515</p>
			</div>	
			<div class="box">
				<img src="myimages/a16.jpg" alt="" />
				<p>161616</p>
			</div>	
			<div class="box">
				<img src="myimages/a17.jpg" alt="" />
				<p>171717</p>
			</div>	
			
		</div>
		
	</body>
</html>

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND