九宫格算法核心：

  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. pycharm 下使用tensorflow 之环境配置

    我们常常看代码使用ide里面看,而且还可以看到调试信息(虽然tensorflow有专门的调试介绍哈) 但是,常常代码在终端里面执行可以直接执行,但是到pycharm里面就会出现各种问题,常见的就是找不 ...

  2. win7 win10下80端口被System进程占用的解决方法

    用如下方法可以解决System进程占用80端口的问题:打开RegEdit:开始-运行-输入regedit-调出注册表找到HKEY_LOCAL_MACHINE\SYSTEM\CurrentControl ...

  3. 360浏览器对CSS的补齐

    360浏览器对很多CSS不兼容,导致了很多代码显示不正常, 常见的解决方法: 很多人在源代码加了<meta content=\"IE=edge\" http-equiv=\& ...

  4. netty(一) netty有哪几部分构成

    netty netty是一个支持高并发的非阻塞I/O框架. Channel Channel 是 NIO 基本的结构.它代表了一个用于连接到实体如硬件设备.文件.网络套接字或程序组件,能够执行一个或多个 ...

  5. 2015-2016 ACM-ICPC Nordic Collegiate Programming Contest (NCPC 2015)

    题目链接 :  http://codeforces.com/gym/100781/attachments A-Adjoin the Network 题意大概是有多棵树(也可能是一颗),现在要把它们合并 ...

  6. Git 分支合并：合并某次提交

    有时只想合并其它分支到某次提交,而不是所有提交. 一 切换到当前分支 首先,在做一次可能有冲突的合并前尽可能保证工作目录是干净的. 如果你有正在做的工作,要么提交到一个临时分支要么储藏它. 这使你可以 ...

  7. NoSql 数据库理解

    主要分类: 键值(Key-Value)存储数据库 这一类数据库主要会使用到一个哈希表,这个表中有一个特定的键和一个指针指向特定的数据.Key/value模型对于IT系统来说的优势在于简单.易部署.但是 ...

  8. P1495 曹冲养猪（拓展欧几里得）

    题目描述 自从曹冲搞定了大象以后,曹操就开始捉摸让儿子干些事业,于是派他到中原养猪场养猪,可是曹冲满不高兴,于是在工作中马马虎虎,有一次曹操想知道母猪的数量,于是曹冲想狠狠耍曹操一把.举个例子,假如有 ...

  9. 解决vs code 内置终端，字体间隔过大问题。（linux centos7成功)

    如图. 去文件-首选项-设置里修改. "terminal.integrated.fontFamily": ""注意此处默认为空白,所以显示的就比较奇怪. 此处我 ...

  10. mysql空值排序

    SELECT * FROM lzh_topic_channel_product ORDER BY order_id is null , order_id  其中的ORDER BY order_id i ...