九宫格算法核心：

  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. vivo手机，自带世界之窗浏览器，sessionStorage设置的值为null

    最近遇到一个小问题 用vivo手机自带浏览器,每次跳转到一个新页面都是重新打开一个webpage,导致sessionStorage设置的值都没了. 所以开发移动端网页时,谨慎使用sessionStor ...

  2. Jenkins安装时Web页面报错提示离线安装

    先跳过所有. 方法1 先看它的提示:”参考离线Jenkins安装文档“发现链接点不开,我还以为是被墙了呢,FQ以后还是打不开.看来这个参考文档是没有用滴.点击配置HTTP代理跳出如下界面:安装Jenk ...

  3. Pandas合并数据集之concat、combine_first方法

    轴向连接(concat) Numpy import numpy as np import pandas as pd from pandas import Series arr = np.arange( ...

  4. docker上安装elasticsearch和ik分词器插件和header，实现分词功能

    docker run -di --name=tensquare_es -p 9200: -p 9300:9300 elasticsearch:5.6.8 创建elasticsearch容器(如果版本不 ...

  5. 分布式Snowflake雪花算法

    前言 项目中主键ID生成方式比较多,但是哪种方式更能提高的我们的工作效率.项目质量.代码实用性以及健壮性呢,下面作了一下比较,目前雪花算法的优点还是很明显的. 优缺点比较 UUID(缺点:太长.没法排 ...

  6. angularjs1.x的directive中的link参数element见解

    angular.module("APP",[]) .directive("testDw",function () { return{ restrict:&quo ...

  7. journalctl 清理journal日志

    在CentOS 7开始使用的systemd使用了journal日志,这个日志的管理方式和以往使用syslog的方式不同,可以通过管理工具维护. 使用df -h检查磁盘文件,可以看到/run目录下有日志 ...

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

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

  9. Flink官方文档/介绍/教程/用例

    https://flink.apache.org/ 使用谷歌浏览器进入官网后,点击页面右键,使用谷歌翻译,翻译准确率很高: 常用部分:

  10. cpp 区块链模拟示例(二)工程代码解析

    /* 作 者: itdef 欢迎转帖 请保持文本完整并注明出处 技术博客 http://www.cnblogs.com/itdef/ 技术交流群 群号码:432336863欢迎c c++ window ...