js实现九宫格布局效果

效果


代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				
			}
			#container{
				width: 1200px;
				margin:0 auto;
				
			}
			#top{
				padding: 20px;
				
			}
			#bottom{
				position: relative;
			}
			.box{       //每一个小块
				width: 220px;
				height: 360px;
				margin: 0 15px 15px 0;
				background-color:#e8e8e8;
				
			}
			.box img{
				width: 220px;
				height: 300px;
			}
			.box p{
				color: orangered;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="top">
				<button id="btn1">3</button>
				<button id="btn2">4</button>
				<button id="btn3">5</button>
			</div>
			<div id="bottom">
				<div class="box">
					<img src="../img/bg2.jpg" />
					<h4>以为遇见你</h4>
					<p>世界才会变得美丽</p>
				</div>
				<div class="box">
					<img src="../img/bg2.jpg" />
					<h4>以为遇见你</h4>
					<p>世界才会变得美丽</p>
				</div>
				<div class="box">
					<img src="../img/bg2.jpg" />
					<h4>以为遇见你</h4>
					<p>世界才会变得美丽</p>
				</div>
				<div class="box">
					<img src="../img/bg2.jpg" />
					<h4>以为遇见你</h4>
					<p>世界才会变得美丽</p>
				</div>
				<div class="box">
					<img src="../img/bg2.jpg" />
					<h4>以为遇见你</h4>
					<p>世界才会变得美丽</p>
				</div>
				<div class="box">
					<img src="../img/bg2.jpg" />
					<h4>以为遇见你</h4>
					<p>世界才会变得美丽</p>
				</div>
				<div class="box">
					<img src="../img/bg2.jpg" />
					<h4>以为遇见你</h4>
					<p>世界才会变得美丽</p>
				</div>
				<div class="box">
					<img src="../img/bg2.jpg" />
					<h4>以为遇见你</h4>
					<p>世界才会变得美丽</p>
				</div>
				<div class="box">
					<img src="../img/bg2.jpg" />
					<h4>以为遇见你</h4>
					<p>世界才会变得美丽</p>
				</div>
				<div class="box">
					<img src="../img/bg2.jpg" />
					<h4>以为遇见你</h4>
					<p>世界才会变得美丽</p>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload=function () {
			//判断是否有id
			function $(id) {
				return typeof id ==='string'?document.getElementById(id):null;
			}
			//改变每个位置的函数 jiuge
			function jiuge(lieshu,pn) {
				var boxW=220,boxH=360,boxXY=15;
				
				for(var i=0;i<pn.children.length;i++){
					
					var row =Math.floor(i/lieshu);//
					var col=Math.floor(i%lieshu);//
					
				console.log("当前盒子所在的坐标:("+row+","+col+")");		
					
					var sd=pn.children[i];	
					sd.style.position='absolute';
					sd.style.left=col*(boxW+boxXY)+'px';
					sd.style.top=row*(boxH+boxXY)+'px';	
				}		
			}
			
			
	//调用		
		$('btn1').addEventListener('click',function () {
			jiuge(3,$('bottom'));
		});	
		$('btn2').addEventListener('click',function () {
			jiuge(4,$('bottom'));
		});		
		$('btn3').addEventListener('click',function () {
			jiuge(5,$('bottom'));
		});	
			
			
		}
	</script>
</html>

你可能感兴趣的:(js特效篇)