九宮格算法核心：
- 利用控件索引index計算出控件所在的行數和列數；
- 利用控件計算出left距離；
- 利用控件計算出top距離；
- 寫特效時需要用到定位
公式：
- 行 row=parseInt(i/cols);
- 列 col=parseInt(i%cols);
i是當前的盒子，cols是總列數，
代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九宮格</title>
<style>
*{
padding: 0;
margin: 0;
}
#top{
margin-top:30px;
margin-bottom: 20px;
margin-left:20px;
}
#bottom{
position: relative;
}
#bottom .content{
width: 220px;
height: 360px;
background-color: skyblue;
margin: 0 0 15px 15px;
padding: 5px;
}
.content img{
width: 220px;
height: 308px;
}
#bottom .content p:last-child{
font-size: 15px;
color: red;
}
</style>
</head>
<body>
<div id="top">
<button>排成三列</button>
<button>排成四列</button>
<button>排成五列</button>
</div>
<div id="bottom">
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的導演處女作</p>
<p>幾乎全面啟用新演員的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的導演處女作</p>
<p>幾乎全面啟用新演員的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的導演處女作</p>
<p>幾乎全面啟用新演員的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的導演處女作</p>
<p>幾乎全面啟用新演員的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的導演處女作</p>
<p>幾乎全面啟用新演員的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的導演處女作</p>
<p>幾乎全面啟用新演員的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的導演處女作</p>
<p>幾乎全面啟用新演員的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的導演處女作</p>
<p>幾乎全面啟用新演員的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的導演處女作</p>
<p>幾乎全面啟用新演員的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的導演處女作</p>
<p>幾乎全面啟用新演員的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的導演處女作</p>
<p>幾乎全面啟用新演員的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的導演處女作</p>
<p>幾乎全面啟用新演員的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的導演處女作</p>
<p>幾乎全面啟用新演員的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的導演處女作</p>
<p>幾乎全面啟用新演員的做法</p>
</div>
<div class="content">
<img src="./images/dianying.jpg">
<p>是一部非常成功的導演處女作</p>
<p>幾乎全面啟用新演員的做法</p>
</div>
</div>
<script>
window.onload=function(){
var top=document.getElementById("top");
var btns=top.getElementsByTagName("button");
var content=document.getElementById("bottom");
// console.log(content.children);
//console.log(btns);
//定義變量標識盒子的寬度和高度
var cssW=220;
var cssH=360;
var marginXY=15;
//監聽按鈕點擊事件
btns[0].onclick=function(){
getContent(3);
}
btns[1].onclick=function(){
getContent(4)
}
btns[2].onclick=function(){
getContent(5);
}
function getContent(cols){
var cols;
//遍歷
for(var i=0;i<content.children.length;i++){
var currentCont=content.children[i];
//console.log(currentCont);
//盒子所在的行
var row=parseInt(i/cols);
//盒子所在的列
var col=parseInt(i%cols);
//console.log("盒子在第" +row+ "行,""在第" +col+ "列");
currentCont.style.position="absolute";
currentCont.style.left=col*(cssW+marginXY)+"px";
currentCont.style.top=row*(cssH+marginXY)+"px";
}
}
}
</script>
</body>
</html>