基于原生js實現(xiàn)九宮格算法代碼實例
更新時間：2020年07月03日 15:22:00 作者：奔跑的太陽花
這篇文章主要介紹了基于原生js實現(xiàn)九宮格算法代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
九宮格算法核心：
- 利用控件索引index計算出控件所在的行數(shù)和列數(shù)；
- 利用控件計算出left距離；
- 利用控件計算出top距離；
- 寫特效時需要用到定位
公式：
行 row=parseInt(i/cols);
列 col=parseInt(i%cols);
i是當前的盒子，cols是總列數(shù)，
代碼示例：
<!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;
//監(jiān)聽按鈕點擊事件
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實現(xiàn)）
1、本文的九宮格是用原生的js實現(xiàn)的；
2、實現(xiàn)的九宮格效果是：可交換1-9的任意方格，且將方格拖拽至大盒子外松開后可自動回到拖拽之前的位置。
3、代碼如下：
html代碼：
<ul id="box"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </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;
};
}
};
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
javascript跟隨鼠標x,y坐標移動的字效果...2007-04-04
JavaScript實現(xiàn)twitter puddles算法實例
這篇文章主要介紹了JavaScript實現(xiàn)twitter puddles算法實例,本文源自twitter的一道面試題,本文使用js解開了這首題,需要的朋友可以參考下2014-12-12
淺析JS中的 map, filter, some, every, forEach, for in, for of 用法總
本文是小編給大家總結的關于javascript中的map, filter, some, every, forEach, for in, for of 用法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-03-03
JavaScript實現(xiàn)文件下載的14種方法總結大全
在JavaScript中實現(xiàn)文件下載的功能可以通過多種方式實現(xiàn),這篇文章主要給大家介紹了關于JavaScript實現(xiàn)文件下載的14種方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
這篇文章主要給大家介紹了關于原生微信小程序中封裝一個模擬select下拉框組件的相關資料,文中介紹了如何在小程序中創(chuàng)建和使用自定義組件van-select,包括組件的創(chuàng)建步驟和在頁面中的應用方法,需要的朋友可以參考下2024-11-11
這篇文章主要為大家詳細介紹了JS實現(xiàn)多重選項卡切換輪播圖制作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript新引入的原始數(shù)據(jù)類型Symbol詳解
Symbol是ES6中引入的一種新的基本數(shù)據(jù)類型，用于表示一個獨一無二的值。它是JavaScript中的第七種數(shù)據(jù)類型。本文將詳細講講Symbol的使用，需要的可以參考一下2023-01-01
動態(tài)樣式類封裝JS代碼，動態(tài)的改變樣式。2009-09-09
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)購物車案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
js控件Kindeditor實現(xiàn)圖片自動上傳功能
這篇文章主要為大家詳細介紹了js控件Kindeditor實現(xiàn)圖片自動上傳功能的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06