基于原生js实现九宫格算法代码实例

更新时间：2020年07月03日 15:22:00 作者：奔跑的太阳花

这篇文章主要介绍了基于原生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实现）

1、本文的九宫格是用原生的js实现的；

2、实现的九宫格效果是：可交换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;
    };
  }
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

分享ES6 20个经常使用技巧
这篇文章主要分享ES6 20个经常使用技巧，作用是使JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言，具体使用详情需要的小伙伴可以参考下面文章内容
2022-06-06
详解webpack es6 to es5支持配置
这篇文章主要介绍了详解webpack es6 to es5支持配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
axios请求参数的三种方式示例详解
这篇文章主要介绍了axios请求参数的三种方式,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-07-07
js 程序执行与顺序实现详解
JavaScript是一种描述型脚本语言，由浏览器进行动态的解析与执行，浏览器对于不同的方式有不同的解析顺序，详细介绍如下，感兴趣的朋友可以参考下哈
2013-05-05
ES6解构赋值的功能与用途实例分析
这篇文章主要介绍了ES6解构赋值的功能与用途,结合实例形式分析了ES6结构赋值针对函数参数、赋值、json等相关操作使用技巧,需要的朋友可以参考下
2017-10-10
微信小程序canvas实现手写签名
这篇文章主要为大家详细介绍了微信小程序canvas实现手写签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
javascript 获取元素样式必杀技
这篇文章主要介绍了javascript 获取元素样式必杀技,需要的朋友可以参考下
2014-05-05
Openlayers绘制聚合标注
这篇文章主要为大家详细介绍了Openlayers实现聚合标注，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
ES6通过babel转码使用webpack使用import关键字
这篇文章主要介绍了es6通过babel转码还需要使用webpack才可以使用import关键字吗的相关资料,需要的朋友可以参考下
2016-12-12
Bootstrap响应式侧边栏改进版
这篇文章主要为大家详细介绍了Bootstrap响应式侧边栏改进版，结合导航条和下拉菜单进行改进,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09

基于原生js实现九宫格算法代码实例

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具