基于原生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='http://www.cgvv.com.cn/bcjs/images/dianying.jpg'> <p>是一部非常成功的導演處女作</p> <p>幾乎全面啟用新演員的做法</p> </div> <div class='content'> <img src='http://www.cgvv.com.cn/bcjs/images/dianying.jpg'> <p>是一部非常成功的導演處女作</p> <p>幾乎全面啟用新演員的做法</p> </div> <div class='content'> <img src='http://www.cgvv.com.cn/bcjs/images/dianying.jpg'> <p>是一部非常成功的導演處女作</p> <p>幾乎全面啟用新演員的做法</p> </div> <div class='content'> <img src='http://www.cgvv.com.cn/bcjs/images/dianying.jpg'> <p>是一部非常成功的導演處女作</p> <p>幾乎全面啟用新演員的做法</p> </div> <div class='content'> <img src='http://www.cgvv.com.cn/bcjs/images/dianying.jpg'> <p>是一部非常成功的導演處女作</p> <p>幾乎全面啟用新演員的做法</p> </div> <div class='content'> <img src='http://www.cgvv.com.cn/bcjs/images/dianying.jpg'> <p>是一部非常成功的導演處女作</p> <p>幾乎全面啟用新演員的做法</p> </div> <div class='content'> <img src='http://www.cgvv.com.cn/bcjs/images/dianying.jpg'> <p>是一部非常成功的導演處女作</p> <p>幾乎全面啟用新演員的做法</p> </div> <div class='content'> <img src='http://www.cgvv.com.cn/bcjs/images/dianying.jpg'> <p>是一部非常成功的導演處女作</p> <p>幾乎全面啟用新演員的做法</p> </div> <div class='content'> <img src='http://www.cgvv.com.cn/bcjs/images/dianying.jpg'> <p>是一部非常成功的導演處女作</p> <p>幾乎全面啟用新演員的做法</p> </div> <div class='content'> <img src='http://www.cgvv.com.cn/bcjs/images/dianying.jpg'> <p>是一部非常成功的導演處女作</p> <p>幾乎全面啟用新演員的做法</p> </div> <div class='content'> <img src='http://www.cgvv.com.cn/bcjs/images/dianying.jpg'> <p>是一部非常成功的導演處女作</p> <p>幾乎全面啟用新演員的做法</p> </div> <div class='content'> <img src='http://www.cgvv.com.cn/bcjs/images/dianying.jpg'> <p>是一部非常成功的導演處女作</p> <p>幾乎全面啟用新演員的做法</p> </div> <div class='content'> <img src='http://www.cgvv.com.cn/bcjs/images/dianying.jpg'> <p>是一部非常成功的導演處女作</p> <p>幾乎全面啟用新演員的做法</p> </div> <div class='content'> <img src='http://www.cgvv.com.cn/bcjs/images/dianying.jpg'> <p>是一部非常成功的導演處女作</p> <p>幾乎全面啟用新演員的做法</p> </div> <div class='content'> <img src='http://www.cgvv.com.cn/bcjs/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; }; }};
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. python GUI庫圖形界面開發(fā)之PyQt5動態(tài)(可拖動控件大小)布局控件QSplitter詳細使用方法與實例2. vue跳轉(zhuǎn)頁面常用的幾種方法匯總3. 不要在HTML中濫用div4. ASP 處理JSON數(shù)據(jù)的實現(xiàn)代碼5. js開發(fā)中的頁面、屏幕、瀏覽器的位置原理（高度寬度）說明講解（附圖）6. CSS清除浮動方法匯總7. XML 非法字符（轉(zhuǎn)義字符）8. 父div高度不能自適應子div高度的解決方案9. CSS3實例分享之多重背景的實現(xiàn)(Multiple backgrounds)10. XML入門的常見問題(三)
網(wǎng)公網(wǎng)安備