九宫格算法核心：
- 利用控件索引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>
九宫格（用原生js实现）
1、本文的九宫格是用原生的js实现的；
2、实现的九宫格效果是：可交换1-9的任意方格，且将方格拖拽至大盒子外松开后可自动回到拖拽之前的位置。
3、代码如下：
html代码：
<ul id="box"> <li>1li> <li>2li> <li>3li> <li>4li> <li>5li> <li>6li> <li>7li> <li>8li> <li>9li> ul>
css代码：
body,div,p,h1,h2,h3,h4,h5,h6,ol,ul,li,dl,dt,dd,th,tr,td,hr,caption,table,form,img,input,legend,fieldset{ margin:0; padding:0; } html { overflow: hidden; } ul { list-style: none; } #box { position: relative; margin: 20px auto; width: 640px; height: 640px; border: 1px solid #eee; } #box li { position: absolute; width: 200px; height: 200px; line-height: 200px; text-align: center; font-size: 40px; font-weight: bold; background: #eee; } #box .active { z-index: 1; color: #fff; background: blue; }
js代码：
window.onload = function () { var oBox = document.getElementById('box'); var aLi = oBox.children; for(var i = 0; i < aLi.length; i++) { // 布局 aLi[i].style.left = 210 * (i % 3) + 10 + 'px'; aLi[i].style.top = 210 * Math.floor(i / 3) + 10 + 'px'; // 添加拖拽功能 aLi[i].index = i; aLi[i].onmousedown = function (ev) { var e = ev || window.event; var iX = e.clientX - this.offsetLeft; var iY = e.clientY - this.offsetTop; if(this.setCapture) { this.setCapture(); } var oThat = this; // 添加class名称 this.className = 'active'; document.onmousemove = function (ev) { var e = ev || window.event; var iL = e.clientX - iX; var iT = e.clientY - iY; oThat.style.left = iL + 'px'; oThat.style.top = iT + 'px'; // 交换位置的条件 for(var j = 0; j < aLi.length; j++) { if(oThat != aLi[j] && oThat.offsetLeft + oThat.offsetWidth > aLi[j].offsetLeft + aLi[j].offsetWidth / 2 && oThat.offsetTop + oThat.offsetHeight > aLi[j].offsetTop + aLi[j].offsetHeight / 2 && oThat.offsetLeft < aLi[j].offsetLeft + aLi[j].offsetWidth / 2 && oThat.offsetTop < aLi[j].offsetTop + aLi[j].offsetHeight / 2) { var iCurIndex = oThat.index; // 交换位置 aLi[j].style.left = 210 * (iCurIndex % 3) + 10 + 'px'; aLi[j].style.top = 210 * Math.floor(iCurIndex / 3) + 10 + 'px'; // 交换下标 oThat.index = aLi[j].index; aLi[j].index = iCurIndex; break; } } }; document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; if(oThat.releaseCapture) { oThat.releaseCapture(); } // 去掉class名称 oThat.className = ''; // 重置当前拖拽元素的位置 oThat.style.left = 210 * (oThat.index % 3) + 10 + 'px'; oThat.style.top = 210 * Math.floor(oThat.index / 3) + 10 + 'px'; }; return false; }; } };