JS 九宮格算法用原生js實現

時間 2019-12-11

標籤九宮算法原生實現欄目 JavaScript 简体版

原文原文鏈接

九宮格算法核心：css

利用控件索引index計算出控件所在的行數和列數；
利用控件計算出left距離；
利用控件計算出top距離；
寫特效時須要用到定位

公式：html

行 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實現）

一、本文的九宮格是用原生的js實現的；this

二、實現的九宮格效果是：可交換1-9的任意方格，且將方格拖拽至大盒子外鬆開後可自動回到拖拽以前的位置。spa

三、代碼以下：code

html代碼：orm

<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代碼：htm

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代碼：blog

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;
        };
    }
};