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 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
Oct 17 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
很实用的一个完整email发送程序
2006/10/09 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
Python yield 小结和实例
2014/04/25 Python
Python实现子类调用父类的方法
2014/11/10 Python
复习Python中的字符串知识点
2015/04/14 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
python读取Excel实例详解
2018/08/17 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
国培远程培训感言
2014/03/08 职场文书
个人查摆剖析材料
2014/10/04 职场文书
三方股东合作协议书
2014/10/28 职场文书
离婚纠纷代理词
2015/05/23 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers