基于原生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;
    };
  }
};

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

Javascript 相关文章推荐
使用Javascript和DOM Interfaces来处理HTML
Oct 09 Javascript
js动态设置鼠标事件示例代码
Oct 30 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
详解用vue编写弹出框组件
Jul 04 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
Node.js学习教程之Module模块
Sep 03 Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 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
You might like
PHP新手上路(六)
2006/10/09 PHP
PHP语法速查表
2006/12/06 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
jquery中ajax学习笔记4
2011/10/16 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
pymysql 开启调试模式的实现
2019/09/24 Python
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
小学毕业典礼主持词
2014/03/27 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
领导干部“四风”查摆问题个人整改措施
2014/10/28 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
保安辞职信范文
2015/02/28 职场文书
社区工作者个人总结
2015/02/28 职场文书
写好求职信的技巧解密
2019/05/14 职场文书