JS 　实现九宫格算法

Posted 2021-01-07 Alice_Daily

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS 　实现九宫格算法相关的知识，希望对你有一定的参考价值。

九宫格算法核心：

利用控件索引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 　实现九宫格算法的主要内容，如果未能解决你的问题，请参考以下文章

IOS 自定义按钮（代码实现）＋九宫格

java 九宫格算法，根据已知数据算出九宫格

挑战程序设计竞赛（算法和数据结构）——19.2九宫格拼图问题的JAVA实现

华为OD机试 - 九宫格按键输入（JavaScript） | 机试题+算法思路+考点+代码解析 2023

利用div+css实现九宫格，然后用js实现点击每个格子可以随机更改格子(div)的背景颜色

JS 实现九宫格算法

JS 　实现九宫格算法