九宫格布局
制作一个类似九宫格一样的网页布局，适合照片或电影展示等，效果如下图：
<!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 () { // 1. 获取需要的标签 var btns = document.getElementById("top").children; var bottom = document.getElementById("bottom"); // 2.监听按钮的点击 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) { // 2.1 定义变量 var boxW = 220, boxH = 360, marginXY = 15; // 2.2 遍历 for(var i=0; i<parentNode.children.length; i++){ // 2.2.1 求出当前盒子所在的行和列 var row = parseInt(i / allCols); var col = parseInt(i % allCols); // console.log("当前盒子在第" + row + " ,第" + col); // 2.2.2 盒子的定位 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>
浙公网安备 33010602011771号