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 相关文章推荐
Javascript下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
Dec 28 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
JavaScript中的惰性载入函数及优势
Feb 18 Javascript
基于Cesium绘制抛物弧线
Nov 18 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中json_decode()和json_encode()的使用方法
2012/06/04 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
Vue 父子组件、组件间通信
2017/03/08 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
python实现逆波兰计算表达式实例详解
2015/05/06 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
python实现数据图表
2017/07/29 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
Django实现基于类的分页功能
2019/10/31 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
办公文员的工作岗位职责
2013/11/12 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
房地产项目建议书
2014/03/12 职场文书
服务宗旨标语
2014/07/01 职场文书
公司门卫岗位职责
2015/04/13 职场文书
宾馆安全管理制度
2015/08/06 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
教师网络培训心得体会
2016/01/09 职场文书
比较node.js和Deno
2021/04/27 Javascript
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python
2022微信温控新功能上线
2022/05/09 数码科技