码迷,mamicode.com
首页 > 编程语言 > 详细

JS  实现九宫格算法

时间:2018-09-22 17:02:23      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:cti   宽度   red   onclick   absolute   成功   class   relative   color   

九宫格算法核心:

  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  实现九宫格算法

标签:cti   宽度   red   onclick   absolute   成功   class   relative   color   

原文地址:https://www.cnblogs.com/zhang-jiao/p/9690261.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!