首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
JS类的封装及实现代码
Dec 02 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
JS俄罗斯方块，包含完整的设计理念
Dec 11 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
vue.js初学入门教程（2）
Nov 07 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 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
绝对定位(1) mixin(1) GTID(1) 游标(1) 相对定位(1) ref(1) ip连接(1) props(1) postcss-px2rem(1) ECharts(3)
You might like
PHP仿盗链代码
2012/06/03 PHP
php中explode与split的区别介绍
2012/10/03 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
php经典算法集锦
2015/11/14 PHP
高质量PHP代码的50个实用技巧必备（下）
2016/01/22 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
matplotlib简介,安装和简单实例代码
2017/12/26 Python
python3.5安装python3-tk详解
2019/04/26 Python
tornado+celery的简单使用详解
2019/12/21 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
django rest framework 自定义返回方式
2020/07/12 Python
python 实现IP子网计算
2021/02/18 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
JDO的含义
2012/11/17 面试题
放飞理想演讲稿
2014/09/09 职场文书
防卫过当辩护词
2015/05/21 职场文书
教师教育教学随笔
2015/08/15 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL
基于Redission的分布式锁实战
2022/08/14 Redis