JS特效——九宫格布局
程序员文章站
2022-05-28 19:56:31
...
知识点
- 九宫图算法思想
① 获取所有图片div的父标签，并对所有图片div进行遍历
② 坐标可以通过遍历确定
③ 利用绝对布局，left和top进行定位 - 底层封装函数，对上层调用帮助很大
运行效果
初始:
点击三列:
点击四列:
点击五列:
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{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{height:85%;width:100%}
.box>h4{margin:3px 0}
</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="images/叶问.jpg" alt=""><h4>叶问</h4><p>HD1280高清中字版</p></div>
<div class="box"><img src="images/人狼游戏2：野兽阵营.jpg" alt=""><h4>人狼游戏2：野兽阵营</h4><p>BD1280高清中英双字版</p></div>
<div class="box"><img src="images/人狼游戏：疯狂大陆.jpg" alt=""><h4>人狼游戏：疯狂大陆</h4><p></p>BD1280高清中英双字版</div>
<div class="box"><img src="images/夏末.jpg"alt=""><h4>夏末</h4><p>HD1280高清中字版</p></div>
<div class="box"><img src="images/天使请吻我.jpg" alt=""><h4>天使请吻我</h4><p>HD1280高清中字版</p></div>
<div class="box"><img src="images/星球大战9：天行者崛起.jpg" alt=""><h4>星球大战9：天行者崛起</h4><p>BD1280高清中英双字版</p></div>
<div class="box"><img src="images/杀死萨拉查.jpg" alt=""><h4>杀死萨拉查</h4><p>BD1280高清中英双字版</p></div>
<div class="box"><img src="images/死亡山地.jpg" alt=""><h4>死亡山地</h4><p>BD1280高清中英双字版</p></div>
<div class="box"><img src="images/网中蜘蛛.jpg" alt=""><h4>网中蜘蛛</h4><p>BD1280高清中英双字版</p></div>
<div class="box"><img src="images/误杀.jpg" alt=""><h4>误杀</h4><p>HD1280高清中字版</p></div>
<div class="box"><img src="images/速度与激情：特别行动.jpg" alt=""><h4>速度与激情：特别行动</h4><p>BD1280高清中英双字版</p></div>
<div class="box"><img src="images/荣耀与幻想.jpg" alt=""><h4>荣耀与幻想</h4><p>BD1280高清中英双字版</p></div>
<div class="box"><img src="images/猫腻少女.jpg" alt=""><h4>猫腻少女</h4>HD1280高清中字版</div>
<div class="box"><img src="images/变焦.jpg" alt=""><h4>变焦</h4><p>BD1280高清中英双字版</p></div>
<div class="box"><img src="images/印巴冤狱.jpg" alt=""><h4>印巴冤狱</h4><p>BD1280高清中英双字版</p></div>
</div>
</div>
<script>
window.onload = function (ev) {
$('btn1').addEventListener('click',function (ev1) {
j_flex(3,$('bottom'));
});
$('btn2').addEventListener('click',function (ev1) {
j_flex(4,$('bottom'));
});
$('btn3').addEventListener('click',function (ev1) {
j_flex(5,$('bottom'));
});
};
/**
* n宫格布局
* @param {number}allCols
* @param {object}parentNode
*/
function j_flex(allCols, parentNode) {
// 1. 定义变量
var boxWidth = 220, boxHeight = 360, marginXY = 15;
// 2. 便利
for (var i = 0; i < parentNode.children.length; i++) {
// 2.1 求出当前盒子所在行和列
var row = Math.floor(i / allCols);
var col = Math.floor(i % allCols);
// 2.2 盒子定位
var currentBox = parentNode.children[i];
currentBox.style.position = 'absolute';
currentBox.style.left = col * (boxWidth + marginXY) + 'px';
currentBox.style.top = row * (boxHeight + marginXY) + 'px';
}
}
/**
* 根据id获取元素节点
* @param {string}id
* @returns {any}
*/
function $(id){
return typeof id === 'string' ? document.getElementById(id) : null;
}
</script>
</body>
</html>