编程 Javascript

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

Posted in Javascript onJuly 03, 2020

九宫格算法核心：

利用控件索引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;
    };
  }
};

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

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

- Author -

奔跑的太阳花

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用jscript实现新建和保存一个word文档

Jun 15 Javascript

Three.js源码阅读笔记(Object3D类)

Dec 27 Javascript

原生javascript实现无间缝滚动示例

Jan 28 Javascript

JS动态改变表格边框宽度的方法

Mar 31 Javascript

Hammer.js+轮播原理实现简洁的滑屏功能

Feb 02 Javascript

详解Node.js中的事件机制

Sep 22 Javascript

js模糊查询实例分享

Dec 26 Javascript

jquery uploadify如何取消已上传成功文件

Feb 08 Javascript

使用vue2实现购物车和地址选配功能

Mar 29 Javascript

Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置

May 10 Javascript

JQuery事件委托原理与用法实例分析

May 13 jQuery

vue中使用带隐藏文本信息的图片、图片水印的方法

Apr 24 Javascript

JavaScript DOM常用操作代码汇总

Jul 03 #Javascript

JavaScript缺少insertAfter解决方案

Jul 03 #Javascript

原生javascript如何实现共享onload事件

Jul 03 #Javascript

Vue如何实现监听组件原生事件

Jul 03 #Javascript

如何在node环境实现“get数据解析”代码实例

Jul 03 #Javascript

JavaScrip如果基于url实现图片下载

Jul 03 #Javascript

基于VUE实现判断设备是PC还是移动端

Jul 03 #Javascript