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 控制下拉菜单刷新的方法
Mar 03 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
微信小程序实现电子签名并导出图片
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
将OICQ数据转成MYSQL数据
2006/10/09 PHP
php 正则表达式小结
2009/08/31 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
JavaScript 指导方针
2007/04/05 Javascript
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
python mac下安装虚拟环境的图文教程
2019/04/12 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
Python能做什么
2020/06/02 Python
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
新闻网站实习自我鉴定
2013/09/25 职场文书
思想品德自我鉴定
2013/10/12 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
个人简历自荐信
2014/06/26 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
初二学生评语大全
2014/12/26 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
MySQL大小写敏感的注意事项
2021/05/24 MySQL
Golang 并发编程 SingleFlight模式
2022/04/26 Golang