1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 * {margin: 0;padding: 0;} 8 #container{ 1200px;margin: 0 auto;} 9 #top {padding: 20px;} 10 #bottom {position: relative;} 11 .box { 220px;height: 360px;margin: 0 15px 15px 0;background-color: #e8e8e8;} 12 .box p {color: orangered;} 13 </style> 14 </head> 15 <body> 16 <div id="container"> 17 <div id="top"> 18 <button id="btn1">3列</button> 19 <button id="btn2">4列</button> 20 <button id="btn3">5列</button> 21 </div> 22 <div id="bottom"> 23 <div class="box"> 24 <img src="image/1.jpg" alt=""> 25 <h4>因为遇见你</h4> 26 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 27 </div> 28 <div class="box"> 29 <img src="image/2.jpg" alt=""> 30 <h4>因为遇见你</h4> 31 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 32 </div> 33 <div class="box"> 34 <img src="image/3.jpg" alt=""> 35 <h4>因为遇见你</h4> 36 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 37 </div> 38 <div class="box"> 39 <img src="image/4.jpg" alt=""> 40 <h4>因为遇见你</h4> 41 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 42 </div> 43 <div class="box"> 44 <img src="image/1.jpg" alt=""> 45 <h4>因为遇见你</h4> 46 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 47 </div> 48 <div class="box"> 49 <img src="image/5.jpg" alt=""> 50 <h4>因为遇见你</h4> 51 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 52 </div> 53 <div class="box"> 54 <img src="image/6.jpg" alt=""> 55 <h4>因为遇见你</h4> 56 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 57 </div> 58 <div class="box"> 59 <img src="image/8.jpg" alt=""> 60 <h4>因为遇见你</h4> 61 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 62 </div> 63 <div class="box"> 64 <img src="image/10.jpg" alt=""> 65 <h4>因为遇见你</h4> 66 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 67 </div> 68 <div class="box"> 69 <img src="image/11.jpg" alt=""> 70 <h4>因为遇见你</h4> 71 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 72 </div> 73 <div class="box"> 74 <img src="image/12.jpg" alt=""> 75 <h4>因为遇见你</h4> 76 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 77 </div> 78 <div class="box"> 79 <img src="image/13.jpg" alt=""> 80 <h4>因为遇见你</h4> 81 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 82 </div> 83 <div class="box"> 84 <img src="image/14.jpg" alt=""> 85 <h4>因为遇见你</h4> 86 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 87 </div> 88 <div class="box"> 89 <img src="image/15.jpg" alt=""> 90 <h4>因为遇见你</h4> 91 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 92 </div> 93 <div class="box"> 94 <img src="image/1.jpg" alt=""> 95 <h4>因为遇见你</h4> 96 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 97 </div> 98 <div class="box"> 99 <img src="image/2.jpg" alt=""> 100 <h4>因为遇见你</h4> 101 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 102 </div> 103 <div class="box"> 104 <img src="image/3.jpg" alt=""> 105 <h4>因为遇见你</h4> 106 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 107 </div> 108 <div class="box"> 109 <img src="image/4.jpg" alt=""> 110 <h4>因为遇见你</h4> 111 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 112 </div> 113 <div class="box"> 114 <img src="image/1.jpg" alt=""> 115 <h4>因为遇见你</h4> 116 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 117 </div> 118 <div class="box"> 119 <img src="image/5.jpg" alt=""> 120 <h4>因为遇见你</h4> 121 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 122 </div> 123 <div class="box"> 124 <img src="image/6.jpg" alt=""> 125 <h4>因为遇见你</h4> 126 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 127 </div> 128 <div class="box"> 129 <img src="image/8.jpg" alt=""> 130 <h4>因为遇见你</h4> 131 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 132 </div> 133 <div class="box"> 134 <img src="image/10.jpg" alt=""> 135 <h4>因为遇见你</h4> 136 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 137 </div> 138 <div class="box"> 139 <img src="image/11.jpg" alt=""> 140 <h4>因为遇见你</h4> 141 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 142 </div> 143 <div class="box"> 144 <img src="image/12.jpg" alt=""> 145 <h4>因为遇见你</h4> 146 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 147 </div> 148 <div class="box"> 149 <img src="image/13.jpg" alt=""> 150 <h4>因为遇见你</h4> 151 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 152 </div> 153 <div class="box"> 154 <img src="image/14.jpg" alt=""> 155 <h4>因为遇见你</h4> 156 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 157 </div> 158 <div class="box"> 159 <img src="image/15.jpg" alt=""> 160 <h4>因为遇见你</h4> 161 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 162 </div> 163 </div> 164 </div> 165 <script> 166 window.onload = function (ev) { 167 $('btn1').addEventListener('click', function (ev1) { 168 j_flex(3, $('bottom')); 169 }); 170 171 $('btn2').addEventListener('click', function (ev1) { 172 j_flex(4, $('bottom')); 173 }); 174 175 $('btn3').addEventListener('click', function (ev1) { 176 j_flex(5, $('bottom')); 177 }); 178 }; 179 180 /** 181 * 九宫格布局 182 * @param {number}allCols 183 * @param {object}parentNode 184 */ 185 function j_flex(allCols, parentNode) { 186 // 1. 定义变量 187 var boxW = 220, boxH = 360, marginXY = 15; 188 189 // 2. 遍历 190 for (var i = 0; i < parentNode.children.length; i++) { 191 // 2.1 求出当前盒子所在的行和列 192 var row = Math.floor(i/allCols); //除就是行 193 var col = Math.floor(i % allCols); //取余就是列 194 // console.log('当前盒子所在的位置: （' + row + ',' + col + ')'); 195 196 // 2.2 盒子的定位 197 var currentBox = parentNode.children[i]; 198 currentBox.style.position = 'absolute'; 199 currentBox.style.left = col * (boxW + marginXY) + 'px'; 200 currentBox.style.top = row * (boxH + marginXY) + 'px'; 201 } 202 203 } 204 205 function $(id) { 206 return typeof id === 'string' ? document.getElementById(id) : null; 207 } 208 </script> 209 </body> 210 </html>