九宫格算法核心：

  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. chart.js应用中遇到的问题

    问题一:chart.js的版本问题:打开官网https://github.com/chartjs/Chart.js/releases/tag/v2.7.3,点击Tags,选择最新版本,我这里选用的是V ...

  2. io.netty.resolver.dns.DnsNameResolverContext

    java.net.UnknownHostException: failed to resolve 'xxx.com' after 3 queries at io.netty.resolver.dns. ...

  3. MESSAGE_TYPE_X in Badi:MB_DOCUMENT_UPDATE_BEFORE

    Note:385830 Instead of writing code in MB_DOCUMENT_BEFORE_UPDATE,write a check in user exit MBCF0002 ...

  4. git 删除本地所有分支

    除master的所有: git branch | grep -v "master" | xargs git branch -D   Git删除分支的指令:git branch -d ...

  5. 关于弹性布局的 flex-grow的用法和flex-shrink的用法

    1.首先 flex-grow设置在子项目上 2.flex-grow默认值为0,如果为值1的时候就会撑满 3.flex-grow还可以给其中的一个子元素单独设置,设置为2,其它的则为1或者2都可以,具体 ...

  6. centos 安装解压工作

    解压工具: yum install ark 编辑器: yum install gedit

  7. python 05集合

    1.集合 特性:可变的,不同元素组成,无序,集合中元素类型必须是不可变(数字,元组,字符串) 形式:s={1,"good",(2,3)} 方法:add(), clear()清空, ...

  8. Vux项目搭建

    1.快速搭建项目模板 因为项目使用vux,所以推荐使用vux官网的airyland/vux2 模板,vue-cli工具是vue项目的搭建脚手架 默认为 webpack2 模板,如果你需要使用webpa ...

  9. 【NIFI】 Apache NiFI 之 ExecuteScript处理（二）

    本例介绍NiFI ExecuteScript处理器的使用,使用的脚本引擎ECMScript 接上一篇[NIFI] Apache NiFI 之 ExecuteScript处理(一) ExecuteScr ...

  10. Python踩坑之 sys.argv[-1]代表什么

    平台:win10+python 3.7.0 一.sys说明: sys.argv这个函数是我们写python脚本中最常用的一个函数. sys是Python的一个「标准库」,也就是官方出的「模块」,是「S ...