九宫格布局
Posted zhangzhengyang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了九宫格布局相关的知识，希望对你有一定的参考价值。
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 #containerwidth: 1200px;margin: 0 auto; 9 #top padding: 20px; 10 #bottom position: relative; 11 .box width: 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" > 25 <h4>因为遇见你</h4> 26 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 27 </div> 28 <div class="box"> 29 <img src="image/2.jpg" > 30 <h4>因为遇见你</h4> 31 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 32 </div> 33 <div class="box"> 34 <img src="image/3.jpg" > 35 <h4>因为遇见你</h4> 36 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 37 </div> 38 <div class="box"> 39 <img src="image/4.jpg" > 40 <h4>因为遇见你</h4> 41 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 42 </div> 43 <div class="box"> 44 <img src="image/1.jpg" > 45 <h4>因为遇见你</h4> 46 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 47 </div> 48 <div class="box"> 49 <img src="image/5.jpg" > 50 <h4>因为遇见你</h4> 51 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 52 </div> 53 <div class="box"> 54 <img src="image/6.jpg" > 55 <h4>因为遇见你</h4> 56 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 57 </div> 58 <div class="box"> 59 <img src="image/8.jpg" > 60 <h4>因为遇见你</h4> 61 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 62 </div> 63 <div class="box"> 64 <img src="image/10.jpg" > 65 <h4>因为遇见你</h4> 66 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 67 </div> 68 <div class="box"> 69 <img src="image/11.jpg" > 70 <h4>因为遇见你</h4> 71 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 72 </div> 73 <div class="box"> 74 <img src="image/12.jpg" > 75 <h4>因为遇见你</h4> 76 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 77 </div> 78 <div class="box"> 79 <img src="image/13.jpg" > 80 <h4>因为遇见你</h4> 81 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 82 </div> 83 <div class="box"> 84 <img src="image/14.jpg" > 85 <h4>因为遇见你</h4> 86 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 87 </div> 88 <div class="box"> 89 <img src="image/15.jpg" > 90 <h4>因为遇见你</h4> 91 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 92 </div> 93 <div class="box"> 94 <img src="image/1.jpg" > 95 <h4>因为遇见你</h4> 96 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 97 </div> 98 <div class="box"> 99 <img src="image/2.jpg" > 100 <h4>因为遇见你</h4> 101 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 102 </div> 103 <div class="box"> 104 <img src="image/3.jpg" > 105 <h4>因为遇见你</h4> 106 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 107 </div> 108 <div class="box"> 109 <img src="image/4.jpg" > 110 <h4>因为遇见你</h4> 111 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 112 </div> 113 <div class="box"> 114 <img src="image/1.jpg" > 115 <h4>因为遇见你</h4> 116 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 117 </div> 118 <div class="box"> 119 <img src="image/5.jpg" > 120 <h4>因为遇见你</h4> 121 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 122 </div> 123 <div class="box"> 124 <img src="image/6.jpg" > 125 <h4>因为遇见你</h4> 126 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 127 </div> 128 <div class="box"> 129 <img src="image/8.jpg" > 130 <h4>因为遇见你</h4> 131 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 132 </div> 133 <div class="box"> 134 <img src="image/10.jpg" > 135 <h4>因为遇见你</h4> 136 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 137 </div> 138 <div class="box"> 139 <img src="image/11.jpg" > 140 <h4>因为遇见你</h4> 141 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 142 </div> 143 <div class="box"> 144 <img src="image/12.jpg" > 145 <h4>因为遇见你</h4> 146 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 147 </div> 148 <div class="box"> 149 <img src="image/13.jpg" > 150 <h4>因为遇见你</h4> 151 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 152 </div> 153 <div class="box"> 154 <img src="image/14.jpg" > 155 <h4>因为遇见你</h4> 156 <p>孙怡邓伦牵手演绎刺绣奇缘</p> 157 </div> 158 <div class="box"> 159 <img src="image/15.jpg" > 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 numberallCols 183 * @param objectparentNode 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>
以上是关于九宫格布局的主要内容，如果未能解决你的问题，请参考以下文章