-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-10-19
来源 ：
阅读 769
评论 0
摘要：本篇教程介绍了JavaScript进阶学习之图片操作3，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。
本篇教程介绍了JavaScript进阶学习之图片操作3，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。
<
在页面布局中，常常会用到九宫格布局，如下图所示：
本次我们就以九宫格为基础进行图片的布局操作，首先我们以上面的图片的为例，假设每个格子的大小都相同，将每一个格子相对其父元素进行定位，这样，我们只需要控制每个格子的left和top属性，就可以控制图片的位置了，例如上面序号为4的格子，其left属性值就是每个格子一倍的宽度值，top属性值就是每个格子的一倍高度值，以此为基础，我们将实现下面的效果：
通过用户点击自定义每列显示的个数，来动态控制布局。
首先我们需要在页面中写入基础代码，实现图一的默认显示效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#top{
padding: 20px;
}
#bottom{
position: relative;
}
.box{
width: 220px;
height: 360px;
margin: 0 15px 15px 0;
background-color: #e8e8e8;
}
.box p:last-child{
font-size: 13px;
color: orangered;
}
</style>
</head>
<body>
<div id="top">
<button>3列</button>
<button>4列</button>
<button>5列</button>
</div>
<div id="bottom">
<div class="box">
<img src="image/1.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/2.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/3.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/4.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/5.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/6.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/7.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/8.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/9.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/10.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/11.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/12.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/13.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/14.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/15.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
</div>
</body>
</html>
然后获取相应的标签，监听用户的点击事件，得到每列显示的个数
//获取需要的标签
var btns = document.getElementById("top").children;
var bottom = document.getElementById("bottom");
var allCols = 1;
// 2.监听按钮的点击
btns[0].onclick = function () {
allCols = 3;
};
btns[1].onclick = function () {
allCols = 4;
};
btns[2].onclick = function () {
allCols = 5;
};
第三步，我们需要根据每个盒子的大小和每列显示的个数，依次计算每个盒子的位置：
//根据每个盒子的大小定义变量
var boxW = 220, boxH = 360, marginXY = 15;
//遍历
for(var i=0; i<bottom.children.length; i++){
//求出当前盒子所在的行和列
var row = parseInt(i / allCols);
var col = parseInt(i % allCols);
// console.log("当前盒子在第" + row + " ,第" + col);
//盒子的定位
var currentBox = parentNode.children[i];
currentBox.style.position = ‘absolute‘;
currentBox.style.left = col * (boxW + marginXY) + ‘px‘;
currentBox.style.top = row * (boxH + marginXY) + ‘px‘;}
现在，基本功能已经完成，需要将代码进行稍微的整理，完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#top{
padding: 20px;
}
#bottom{
position: relative;
}
.box{
width: 220px;
height: 360px;
margin: 0 15px 15px 0;
background-color: #e8e8e8;
}
.box p:last-child{
font-size: 13px;
color: orangered;
}
</style>
</head>
<body>
<div id="top">
<button>3列</button>
<button>4列</button>
<button>5列</button>
</div>
<div id="bottom">
<div class="box">
<img src="image/1.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/2.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/3.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/4.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/5.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/6.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/7.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/8.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/9.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/10.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/11.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/12.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/13.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/14.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
<div class="box">
<img src="image/15.jpg" alt="">
<p>因为遇见你</p>
<p>孙怡邓伦牵手演绎刺绣奇缘</p>
</div>
</div>
<script>
window.onload = function () {
//获取需要的标签
var btns = document.getElementById("top").children;
var bottom = document.getElementById("bottom");
//监听按钮的点击
btns[0].onclick = function () {
j_flex(3, bottom);
};
btns[1].onclick = function () {
j_flex(4, bottom);
};
btns[2].onclick = function () {
j_flex(5, bottom);
};
function j_flex(allCols, parentNode) {
//根据每个盒子的大小定义变量
var boxW = 220, boxH = 360, marginXY = 15;
//遍历
for(var i=0; i<parentNode.children.length; i++){
//求出当前盒子所在的行和列
var row = parseInt(i / allCols);
var col = parseInt(i % allCols);
// console.log("当前盒子在第" + row + " ,第" + col);
//盒子的定位
var currentBox = parentNode.children[i];
currentBox.style.position = ‘absolute‘;
currentBox.style.left = col * (boxW + marginXY) + ‘px‘;
currentBox.style.top = row * (boxH + marginXY) + ‘px‘;
}
}
}
</script>
</body>
</html>
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端JavaScript频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
