js实现九宫格布局效果
作者：阡陌路人 时间：2024-04-19 11:03:42
本文实例为大家分享了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>
来源：https://blog.csdn.net/Iwokei/article/details/106339446
标签：js,九宫格,布局
0
投稿猜你喜欢
window.top[_CACHE]实现多个jsp页面共享一个js对象
2023-07-18 09:25:14
ASP如何输出字符
2007-09-22 18:41:00
白鸦:Design IT. (1)，迭代的设计
2008-08-27 21:11:00
XML入门的常见问题(二)
2008-09-05 17:20:00
Python中Playwright 与 pyunit 结合使用详解
2022-04-30 10:42:42
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021-12-27 11:05:53
详解Python中如何将数据存储为json格式的文件
2023-11-01 02:42:11
vue 集成jTopo 处理方法
2024-05-09 15:17:42
Python实现计算字符串中出现次数最多的字符示例
2021-03-11 15:59:13
Python遍历字典方式就实例详解
2021-02-16 08:50:58
sql server中批量插入与更新两种解决方案分享(存储过程)
2012-05-22 18:29:59
javascript中select下拉框的用法总结
2024-04-19 09:57:51
基于OpenCV4.2实现单目标跟踪
2022-04-06 07:58:17
JS实现简洁、全兼容的拖动层实例
2024-04-19 09:49:08
python中np是做什么的
2021-08-25 21:45:23
go中的unsafe包及使用详解
2023-10-13 17:07:27
MYSQL初学者使用指南[适用自己安装mysql者]
2007-08-06 14:53:00
Asp生成RSS的类_给网站加上RSS
2011-04-19 11:06:00
vuejs实现下拉框菜单选择
2023-09-23 08:49:54
Python数据结构与算法之算法分析详解
2022-05-15 19:03:46
