九宫格算法核心：

  1. 利用控件索引index计算出控件所在的行数和列数；
  2. 利用控件计算出left距离；
  3. 利用控件计算出top距离；
  4. 写特效时需要用到定位

公式：

  • 行 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 九宫格算法 用原生js实现

    九宫格算法核心: 利用控件索引index计算出控件所在的行数和列数: 利用控件计算出left距离: 利用控件计算出top距离: 写特效时需要用到定位 公式: 行 row=parseInt(i/cols ...

  2. iOS开发——UI篇&九宫格算法

    九宫格算法 关于iOS开发中九宫格的实现虽然使用不多,而且后面会有更好的方实现,但是作为一个程序员必需要知道的就是九宫格算法的实现. 一:实现思路: (1)明确每一块用得是什么view (2)明确每个 ...

  3. iOS开发系列-九宫格算法-xib

    给大家演示 应用程序下载 小项目,效果图:涉及知识点:懒加载,九宫格算法,字典转模型,自定义UIView ,xib文件的使用 首先把素材拖到Xcode项目中:简单看一下素材文件 此时大家应该首先关注. ...

  4. diff.js 列表对比算法 源码分析

    diff.js列表对比算法 源码分析 npm上的代码可以查看 (https://www.npmjs.com/package/list-diff2) 源码如下: /** * * @param {Arra ...

  5. JS实现随机数生成算法示例代码

    JS实现随机数生成算法的方法有很多,本文为大家介绍一个比较不错的方法. 1, var MT = []; var index = 0; function initialize_generator(see ...

  6. JS中常见算法问题

    JS中常见算法问题 1. 阐述JS中的变量提升(声明提前) 答:将所有的变量提升当当前作用域的顶部,赋值留在原地.意味着我们可以在某个变量声明前就使用该变量. 虽然JS会进行变量提升,但并不会执行真正 ...

  7. 【Vue.js游戏机实战】- Vue.js实现九宫格水果机抽奖游戏总结

    大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现九宫格水果机抽奖 实现思路: Vue component实现九宫格水果机组件,可以嵌套到任意 ...

  8. php+lottery.js制作九宫格抽奖实例

    php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <scrip ...

  9. JS数据结构与算法——栈

    JS数据结构与算法--栈 1.栈结构概念 栈(Stack)是一种先进后出(LIFO Last in First out)的线性表,先进栈的将会比后进栈的先出栈. 栈的限制是仅允许在一端进行插入和删除运 ...

随机推荐

  1. C#发送QQ邮件

    1.首先配置一下发件人的账号密码(密码根据自己所选择的的邮箱填写,此处不做展示) <?xml version="1.0" encoding="utf-8" ...

  2. java学习笔记（六）：变量类型

    java一共三种变量: 局部变量(本地变量):方法调用时创建,方法结束时销毁 实例变量(全局变量):类创建时创建,类销毁时销毁 类变量(静态变量):程序启动是创建,程序销毁时销毁 public cla ...

  3. idea编辑项目出现【Information:java: javacTask: 源发行版 7 需要目标发行版 1.7】

    在编译项目时候出现问题: Information:java: javacTask: 源发行版 7 需要目标发行版 1.7 解决方案:按着图片操作,这几个地方设置的一样就可以了

  4. .net like模糊查询参数化

    List<SqlParameter> paras = new List<SqlParameter>(); if (!string.IsNullOrEmpty(ciName)) ...

  5. 以太坊虚拟机EVM 和EOS 虚拟机的劣势！

     EVM: 01 智能合约设计层面 缺乏标准库支持:EVM缺少完善的标准库支持,甚至最基本的string类型支持,在EVM中都很鸡肋,例如字符串拼接.切割.查找等等都需要开发者自己实现.带来的后果就是 ...

  6. Unity3D 导入aar注意事项

    导出供Unity使用的*.aar文件 1)点击“Build -> Build APK”,生成aar文件 2)由于Unity在打包APK时会自动包含自身的classes.jar,所以需使用压缩软件 ...

  7. [快速幂][NOIP2012]转圈游戏

    转圈游戏 题目描述 n 个小伙伴(编号从 0 到 n-1)围坐一圈玩游戏.按照顺时针方向给 n 个位置编号,从0 到 n-1.最初,第 0 号小伙伴在第 0 号位置,第 1 号小伙伴在第 1 号位置, ...

  8. NCUAP 利用java自带方法实现导入excel取数据

    final JComponent parent = getModel().getContext().getEntranceUI(); JFileChooser chooser = new JFileC ...

  9. Spring Boot 启动（二） Environment 加载

    Spring Boot 启动(二) Environment 加载 Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) 上一节中 ...

  10. c++沉思录 学习笔记 第五章 代理类

    Vehicle 一个车辆的虚基类 class Vehicle {public: virtual double weight()const = 0; virtual void start() = 0; ...