九宫格算法核心:
- 利用控件索引index计算出控件所在的行数和列数;
- 利用控件计算出left距离;
- 利用控件计算出top距离;
- 写特效时需要用到定位
公式:
- 行 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{ 220px; height: 360px; background-color: skyblue; margin: 0 0 15px 15px; padding: 5px; } .content img{ 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>