JS 实现九宫格算法
九宫格算法核心：
- 利用控件索引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 实现九宫格算法的更多相关文章
- JS 九宫格算法 用原生js实现
九宫格算法核心: 利用控件索引index计算出控件所在的行数和列数: 利用控件计算出left距离: 利用控件计算出top距离: 写特效时需要用到定位 公式: 行 row=parseInt(i/cols ...
- iOS开发——UI篇&九宫格算法
九宫格算法 关于iOS开发中九宫格的实现虽然使用不多,而且后面会有更好的方实现,但是作为一个程序员必需要知道的就是九宫格算法的实现. 一:实现思路: (1)明确每一块用得是什么view (2)明确每个 ...
- iOS开发系列-九宫格算法-xib
给大家演示 应用程序下载 小项目,效果图:涉及知识点:懒加载,九宫格算法,字典转模型,自定义UIView ,xib文件的使用 首先把素材拖到Xcode项目中:简单看一下素材文件 此时大家应该首先关注. ...
- diff.js 列表对比算法 源码分析
diff.js列表对比算法 源码分析 npm上的代码可以查看 (https://www.npmjs.com/package/list-diff2) 源码如下: /** * * @param {Arra ...
- JS实现随机数生成算法示例代码
JS实现随机数生成算法的方法有很多,本文为大家介绍一个比较不错的方法. 1, var MT = []; var index = 0; function initialize_generator(see ...
- JS中常见算法问题
JS中常见算法问题 1. 阐述JS中的变量提升(声明提前) 答:将所有的变量提升当当前作用域的顶部,赋值留在原地.意味着我们可以在某个变量声明前就使用该变量. 虽然JS会进行变量提升,但并不会执行真正 ...
- 【Vue.js游戏机实战】- Vue.js实现九宫格水果机抽奖游戏总结
大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现九宫格水果机抽奖 实现思路: Vue component实现九宫格水果机组件,可以嵌套到任意 ...
- php+lottery.js制作九宫格抽奖实例
php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <scrip ...
- JS数据结构与算法——栈
JS数据结构与算法--栈 1.栈结构概念 栈(Stack)是一种先进后出(LIFO Last in First out)的线性表,先进栈的将会比后进栈的先出栈. 栈的限制是仅允许在一端进行插入和删除运 ...
随机推荐
- Python：Fintech产品的第一语言
来源商业新知,原标题:为什么说Python是Fintech与金融变革的秘密武器 人生苦短,不止程序员,Python正在吸引来自金融领域大佬们的青睐目光. 金融科技的风口下,无数传统金融人都想从中掘一桶 ...
- 2、订单填写页面 /items/write?skuId=10&orderNo=201903211033410001
<template> <div class="write"> <div class="adr" v-if="addres ...
- OpenStack 安装：keystone服务
在前面的章节里面,我们配置了基本环境,也安装keystone服务,并且创建了keystone的数据库,在这一篇里面,我们说怎么配置keystone. 首先编辑keystone服务,需要修改如下数据 编 ...
- js+正则+单双引号问题
在处理用js动态添加表格时,表格中有正则表达式,其单双引号问题导致的添加表格不成功,和正则失效问题 <script type="text/javascript"> va ...
- 微信小程序之 -----事件
事件分类 1. 冒泡事件: 当一个组件上的事件被触发后,该事件会向父节点传递. 2. 非冒泡事件: 当一个组件上的事件被触发后,该事件不会向父节点传递. 常见的冒泡 ...
- JavaSE基础知识（3）—流程控制结构
一.顺序结构 1.说明 程序从上往下依次执行,中间没有任何跳转或选择2.特点 变量必须遵循 “前向引用” (局部变量必须先声明.赋值,然后再使用!) 二.分支结构(条件) 1.说明 程序从两条或多条路 ...
- javaweb开发.常用的第三方包
序号 开发包名称 描述 1 dom4j-1.6.1.jar dom4j用于操作XML文件 2 jaxen-1.1-beta-6.jar 用于解析XPath表达式 3 commons-beanuti ...
- 设计模式 工厂模式 使用shared_ptr
参考http://blog.csdn.net/calmreason/article/details/50903729 所有产品继承同一基本类 由工厂保存基类指针 产生各类产品 代码 // 002.cp ...
- c++沉思录 学习笔记 第六章 句柄(引用计数指针雏形？)
一个简单的point坐标类 class Point {public: Point():xval(0),yval(0){} Point(int x,int y):xval(x),yval(y){} in ...
- ----一个roadmap----
在课上了解到了学web前端三个基础,HTML.CSS.JS 从HTML开始,逐步学习CSS.JS 大致写了一个roadmap(应该是roadmap喔 就是这样,以后可能会来更错或者更新 对没错我来更错 ...