基于原生js实现九宫格算法代码实例
更新时间:2020年7月5日 17:36 点击:2180
九宫格算法核心:
- 利用控件索引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实现星星打分效果
相关文章
- 作者:Sabine 【导读】本文介绍了C#的四种排序算法:冒泡排序、选择排序、插入排序和希尔排序 冒泡排序 using System; namespace BubbleSorter { public class Bubb...2020-06-25
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要用实例讲解C#递归算法的概念以及用法,文中代码非常详细,帮助大家更好的参考和学习,感兴趣的朋友可以了解下...2020-06-25
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28