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 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
在JavaScript中,为什么要尽可能使用局部变量?
Apr 06 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
JS实现百度搜索框关键字推荐
Feb 17 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 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安装全攻略:APACHE
2006/10/09 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
python实现在pickling的时候压缩的方法
2014/09/25 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
国际商务英语专业求职信
2014/07/08 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
休假证明书
2015/06/24 职场文书
复活读书笔记
2015/06/29 职场文书
运动会通讯稿300字
2015/07/20 职场文书
PL350与SW11的比较
2021/04/22 无线电