九宫格算法核心：

  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. aptana怎么显示空格 tab和回车等

  2. mysql_day02

    MySQL-Day01回顾1.MySQL的特点 1.关系型数据库 2.跨平台 3.支持多种编程语言2.MySQL的启动和连接 1.服务端启动 sudo /etc/init.d/mysql start| ...

  3. 移动端的1px边框问题

    最近在做一个移动端项目,涉及到1像素问题 其实质就是移动端的css里写1px,看起来比1px粗,这就是物理像素和逻辑像素的区别.物理像素和逻辑像素之间存在一个比例关系,在Javascript中可以用w ...

  4. ExecuteNonQuery（）

    ExecuteNonQuery():执行一个SQL语句,返回受影响的行数,这个方法主要用于执行对数据库执行增加.更新.删除操作,注意查询的时候不是调用这个方法.用于完成insert,delete,up ...

  5. Linux下查看磁盘挂载的几种方法

    Linux下查看磁盘挂载的几种方法 第一种方法:df命令 # df -hT Filesystem Type Size Used Avail Use% Mounted on devtmpfs devtm ...

  6. （转载）Ubuntu 安装GNU Scientific library（GSL）

    背景: Blei的hlda的C语言实现需要使用C语言的科学计算包GSL,因此决定安装.由于在windows下安装极其繁琐,先在Linux上安装之. 系统环境: Linux version 2.6.35 ...

  7. Xadmin显示视图

    .display显示要设置的字段 1. 自定义样式类,显示出要显示的字段,在这个类中,也可以设置对应函数. list_display=[check,"title",delete]2 ...

  8. 洛谷1345 [USACO5.4]奶牛的电信Telecowmunication

    原题链接 最小割点数转换成最小割边数的模板题(不过这数据好小). 每个点拆成两个点,连一条容量为\(1\)的边,原图的边容量定为\(+\infty\),然后跑最大流即可. 这里用的是\(Dinic\) ...

  9. 基于ASP.NET的高校辅导员工作管理系统的设计与实现--论文随笔（四）

    一.基本信息 标题:基于ASP.NET的高校辅导员工作管理系统的设计与实现 时间:2017 出版源:南通理工学院 关键词:ASP.NET; SQL Server; 高校; 管理系统; 辅导员; 二.研 ...

  10. 全渠道java b2b b2c o2o平台

    大型企业分布式互联网电子商务平台,推出PC+微信+APP+云服务的云商平台系统,其中包括B2B.B2C.C2C.O2O.新零售.直播电商等子平台. 根据微服务化设计思想,结合spring cloud一 ...