js实现九宫格布局效果


Posted in Javascript onMay 28, 2020

本文实例为大家分享了js实现九宫格布局效果的具体代码,供大家参考,具体内容如下

效果

js实现九宫格布局效果

js实现九宫格布局效果

js实现九宫格布局效果

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  *{
  margin: 0;
  padding: 0;
  
  }
  #container{
  width: 1200px;
  margin:0 auto;
  
  }
  #top{
  padding: 20px;
  
  }
  #bottom{
  position: relative;
  }
  .box{    //每一个小块
  width: 220px;
  height: 360px;
  margin: 0 15px 15px 0;
  background-color:#e8e8e8;
  
  }
  .box img{
  width: 220px;
  height: 300px;
  }
  .box p{
  color: orangered;
  }
 </style>
 </head>
 <body>
 <div id="container">
  <div id="top">
  <button id="btn1">3列</button>
  <button id="btn2">4列</button>
  <button id="btn3">5列</button>
  </div>
  <div id="bottom">
  <div class="box">
   <img src="../img/bg2.jpg" />
   <h4>以为遇见你</h4>
   <p>世界才会变得美丽</p>
  </div>
  <div class="box">
   <img src="../img/bg2.jpg" />
   <h4>以为遇见你</h4>
   <p>世界才会变得美丽</p>
  </div>
  <div class="box">
   <img src="../img/bg2.jpg" />
   <h4>以为遇见你</h4>
   <p>世界才会变得美丽</p>
  </div>
  <div class="box">
   <img src="../img/bg2.jpg" />
   <h4>以为遇见你</h4>
   <p>世界才会变得美丽</p>
  </div>
  <div class="box">
   <img src="../img/bg2.jpg" />
   <h4>以为遇见你</h4>
   <p>世界才会变得美丽</p>
  </div>
  <div class="box">
   <img src="../img/bg2.jpg" />
   <h4>以为遇见你</h4>
   <p>世界才会变得美丽</p>
  </div>
  <div class="box">
   <img src="../img/bg2.jpg" />
   <h4>以为遇见你</h4>
   <p>世界才会变得美丽</p>
  </div>
  <div class="box">
   <img src="../img/bg2.jpg" />
   <h4>以为遇见你</h4>
   <p>世界才会变得美丽</p>
  </div>
  <div class="box">
   <img src="../img/bg2.jpg" />
   <h4>以为遇见你</h4>
   <p>世界才会变得美丽</p>
  </div>
  <div class="box">
   <img src="../img/bg2.jpg" />
   <h4>以为遇见你</h4>
   <p>世界才会变得美丽</p>
  </div>
  </div>
 </div>
 </body>
 <script type="text/javascript">
 window.onload=function () {
  //判断是否有id
  function $(id) {
  return typeof id ==='string'?document.getElementById(id):null;
  }
  //改变每个位置的函数 jiuge
  function jiuge(lieshu,pn) {
  var boxW=220,boxH=360,boxXY=15;
  
  for(var i=0;i<pn.children.length;i++){
   
   var row =Math.floor(i/lieshu);//行
   var col=Math.floor(i%lieshu);//列
   
  console.log("当前盒子所在的坐标:("+row+","+col+")"); 
   
   var sd=pn.children[i]; 
   sd.style.position='absolute';
   sd.style.left=col*(boxW+boxXY)+'px';
   sd.style.top=row*(boxH+boxXY)+'px'; 
  } 
  }
  
  
 //调用 
 $('btn1').addEventListener('click',function () {
  jiuge(3,$('bottom'));
 }); 
 $('btn2').addEventListener('click',function () {
  jiuge(4,$('bottom'));
 }); 
 $('btn3').addEventListener('click',function () {
  jiuge(5,$('bottom'));
 }); 
  
  
 }
 </script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
js倒计时小程序
Nov 05 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 Javascript
小程序实现录音功能
Sep 22 Javascript
微信小程序实现电子签名并导出图片
May 27 #Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 #Javascript
微信公众号网页分享功能开发的示例代码
May 27 #Javascript
JS字符串补全方法padStart()和padEnd()
May 27 #Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 #Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 #Javascript
使用JavaScript获取Django模板指定键值数据
May 27 #Javascript
You might like
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
详解Django中类视图使用装饰器的方式
2018/08/12 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
高二历史教学反思
2014/01/25 职场文书
求职信需要的五点内容
2014/02/01 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
年检委托书
2014/08/30 职场文书
销售经理工作检讨书
2015/02/19 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
个人工作决心书
2015/09/22 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
Django中的JWT身份验证的实现
2021/05/07 Python
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis
MySQL学习之基础操作总结
2022/03/19 MySQL