快捷導(dǎo)航

基于原生js實(shí)現(xiàn)九宮格算法代碼實(shí)例

更新時(shí)間：2020年07月03日 15:22:00 作者：奔跑的太陽(yáng)花

這篇文章主要介紹了基于原生js實(shí)現(xiàn)九宮格算法代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

九宮格算法核心：

利用控件索引index計(jì)算出控件所在的行數(shù)和列數(shù)；
利用控件計(jì)算出left距離；
利用控件計(jì)算出top距離；
寫(xiě)特效時(shí)需要用到定位

公式：

行 row=parseInt(i/cols);

列 col=parseInt(i%cols);

i是當(dāng)前的盒子，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>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</p>
       <p>幾乎全面啟用新演員的做法</p>
      </div>
      <div class="content">
       <img src="./images/dianying.jpg">
       <p>是一部非常成功的導(dǎo)演處女作</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);
        //定義變量標(biāo)識(shí)盒子的寬度和高度
         var cssW=220;
         var cssH=360;
         var marginXY=15;
         //監(jiān)聽(tīng)按鈕點(diǎ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實(shí)現(xiàn)）

1、本文的九宮格是用原生的js實(shí)現(xiàn)的；

2、實(shí)現(xiàn)的九宮格效果是：可交換1-9的任意方格，且將方格拖拽至大盒子外松開(kāi)后可自動(dòng)回到拖拽之前的位置。

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名稱(chēng)
      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';
 
              // 交換下標(biāo)
              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名稱(chēng)
        oThat.className = '';
 
        // 重置當(dāng)前拖拽元素的位置
        oThat.style.left = 210 * (oThat.index % 3) + 10 + 'px';
        oThat.style.top = 210 * Math.floor(oThat.index / 3) + 10 + 'px';
      };
 
      return false;
    };
  }
};

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: