基于原生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 相关文章推荐
splice slice区别
Oct 09 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
vue按需加载实例详解
Sep 06 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 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-fpm配置详解
2014/02/12 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
Bootstrap基础学习
2015/06/16 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
numpy.array 操作使用简单总结
2019/11/08 Python
德国团购网站:Groupon德国
2018/03/13 全球购物
企业内控岗位的职责
2014/02/07 职场文书
标准毕业生自荐信
2014/06/24 职场文书
销售活动策划方案
2014/08/26 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
小石潭记导游词
2015/02/03 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
小学班级管理心得体会
2016/01/07 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
二年级作文之动物作文
2019/11/13 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js