九宫格布局
作者：互联网
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{width: 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" 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>
标签：九宫格,遇见,孙怡,布局,奇缘,牵手,刺绣,邓伦 来源： https://www.cnblogs.com/zhangzhengyang/p/11192361.html