JavaScript之图片操作3

在页面布局中，常常会用到九宫格布局，如下图所示：

本次我们就以九宫格为基础进行图片的布局操作，首先我们以上面的图片的为例，假设每个格子的大小都相同，将每一个格子相对其父元素进行定位，这样，我们只需要控制每个格子的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="data:image/1.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/2.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/3.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/4.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/5.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/6.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/7.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/8.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/9.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/10.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/11.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/12.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/13.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/14.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data: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="data:image/1.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/2.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/3.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/4.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/5.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/6.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/7.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/8.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/9.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/10.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/11.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/12.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/13.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data:image/14.jpg" alt=""><p>因为遇见你</p><p>孙怡邓伦牵手演绎刺绣奇缘</p></div><div class="box"><img src="data: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>

完整代码下载链接：点这里

转载于:https://www.cnblogs.com/yuyujuan/p/9537458.html

JavaScript之图片操作3相关推荐

通过JavaScript简单的操作DOM（一）
通过JavaScript简单的操作DOM (一)简单的前提概念 1.DOM简介 DOM,文档对象模型.描述了HTML和XML文档结构,然后提供API,来帮助开发人员添加.删除.修改页面的某一部分. ( ...
php 自动拉伸图片,实例详解Javascript防止图片拉伸的自适应处理
相信大家在日常的web开发中,作为前端经常会遇到处理图片拉伸问题的情况.本文主要给大家介绍了关于利用Javascript防止图片拉伸的自适应处理方法,文中通过示例代码介绍的非常详细,对大家的学习或者工 ...
JavaScript 实现图片上传前本地预览
JavaScript 实现图片上传前本地预览图片上传前预览,应该算是一个普遍的需求,很多时候可能选中的图片并不是想要的那张,所以需要上传前预览下. JS(浏览器中)是一门特殊的语言,它没有直接读写磁 ...
javascript中的操作元素
操作元素 JavaScript的DOM操作可以改变网页内容,结构和样式,我们可以利用DOM操作元素来改变元素里面的内容.属性等改变元素内容 element.innerText 从起始位置到种植位 ...
JavaScript的样式操作
JavaScript的样式操作样式操作获取内联样式 getAttribute()方法 DOM对象的style属性 CSSStyleDeclaration对象获取外联样式表 Document对象的 ...
Javascript核心DOM操作学习笔记
DOM .BOM Day01 DOM 1.web APIs和JS基础关联性 1.1 JS的组成 1.2 JS基础阶段以及Web APIs阶段 2.API和Web APIs 2.1 API 2.2 We ...
Javascript Tip(1) 操作剪贴板
javascript可以轻松操作客户端剪贴板内容,不过只适用IE5以上浏览器 javascript可以使用window.clipboardData对象处理剪贴板内容保存到剪贴板的方法 setData ...
php 命令执行crud_如何使用原始JavaScript执行CRUD操作
php 命令执行crud by Zafar Saleem 通过Zafar Saleem 如何使用原始JavaScript执行CRUD操作 (How to perform CRUD operations ...
JavaScript常见集合操作
JavaScript常见集合操作集合的遍历 FOR循环(效率最高) 优点:JavaScript最普遍的for循环,执行效率最高缺点:无法遍历对象 for(let i=0;i<array.le ...

JavaScript之图片操作3

JavaScript之图片操作3相关推荐

最新文章

热门文章