1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>九宫格布局</title>
6 <style type="text/css">
7 *{
8 padding:0;
9 margin:0;
10 }
11 #wrap{
12 overflow: hidden;
13 }
14 .item{
15 width: 248px;
16 height: 360px;
17 font-size: 13px;
18 }
19 #wrap .item .title{
20 width: 248px;
21 height: 30px;
22 line-height: 30px;
23 overflow: hidden;
24 margin-bottom: 10px;
25 }
26 .imgContainer{
27 width: 248px;
28 display: table-cell;
29 text-align: center;
30 }
31 #wrap .item .price{
32 color:#ff6700;
33 font-size: 18px;
34 font-weight: bold;
35 }
36 </style>
37 </head>
38 <body>
39 <div id="cols">
40 <button>3列</button>
41 <button>4列</button>
42 <button>5列</button>
43 </div>
44 <div id="wrap">
45 <div class="item">
46 <div class="imgContainer">
47 <img src="images/taobao_1.jpg" alt="">
48 </div>
49 <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
50 <p class="price">¥69</p>
51 </div>
52 <div class="item">
53 <div class="imgContainer">
54 <img src="images/taobao_2.jpg" alt="">
55 </div>
56 <p class="title">百搭开春装女胖mm夏季显瘦2019新款大码韩版</p>
57 <p class="price">¥69</p>
58 </div>
59 <div class="item">
60 <div class="imgContainer">
61 <img src="images/taobao_3.jpg" alt="">
62 </div>
63 <p class="title">婚纱2019新款欧美韩式孕妇婚纱高腰韩版</p>
64 <p class="price">¥69</p>
65 </div>
66 <div class="item">
67 <div class="imgContainer">
68 <img src="images/taobao_4.jpg" alt="">
69 </div>
70 <p class="title">点上衣很仙的女装夏2019新款洋气打底衫</p>
71 <p class="price">¥90</p>
72 </div>
73 <div class="item">
74 <div class="imgContainer">
75 <img src="images/taobao_5.jpg" alt="">
76 </div>
77 <p class="title">大码女装胖MM文艺时尚格子圆点显瘦连衣裙</p>
78 <p class="price">¥78</p>
79 </div>
80 <div class="item">
81 <div class="imgContainer">
82 <img src="images/taobao_6.jpg" alt="">
83 </div>
84 <p class="title">2019夏季新款女装韩版修身显瘦V领无袖</p>
85 <p class="price">¥89</p>
86 </div>
87 <div class="item">
88 <div class="imgContainer">
89 <img src="images/taobao_7.jpg" alt="">
90 </div>
91 <p class="title">春季短款小外套女2019春装春秋新款韩</p>
92 <p class="price">¥100</p>
93 </div>
94 <div class="item">
95 <div class="imgContainer">
96 <img src="images/taobao_8.jpg" alt="">
97 </div>
98 <p class="title">大码女装中长款针织衫春装胖mm显瘦</p>
99 <p class="price">¥120</p>
100 </div>
101 <div class="item">
102 <div class="imgContainer">
103 <img src="images/taobao_9.jpg" alt="">
104 </div>
105 <p class="title">春款韩版2019新款女装时尚初春两件套</p>
106 <p class="price">¥107</p>
107 </div>
108 <div class="item">
109 <div class="imgContainer">
110 <img src="images/taobao_10.jpg" alt="">
111 </div>
112 <p class="title">牛仔外套女短款2019春装新款女装韩版</p>
113 <p class="price">¥69</p>
114 </div>
115 <div class="item">
116 <div class="imgContainer">
117 <img src="images/taobao_11.jpg" alt="">
118 </div>
119 <p class="title">2019夏季新款女装裙子纯色流苏a字裙</p>
120 <p class="price">¥56</p>
121 </div>
122 <div class="item">
123 <div class="imgContainer">
124 <img src="images/taobao_12.jpg" alt="">
125 </div>
126 <p class="title">女装休闲短袖韩版宽松2019新款春夏季</p>
127 <p class="price">¥76</p>
128 </div>
129 <div class="item">
130 <div class="imgContainer">
131 <img src="images/taobao_13.jpg" alt="">
132 </div>
133 <p class="title">棉上衣女装秋季新款2019早春休闲时尚</p>
134 <p class="price">¥45</p>
135 </div>
136 </div>
137 </body>
138 <script type="text/javascript">
139 function $(id) {
140 return typeof id === 'string' ? document.getElementById(id) : null
141 }
142 window.onload = function () {
143 var btns = document.getElementsByTagName('button');
144 var items = document.getElementsByClassName('item');
145 btns[0].onclick = function () {
146 buju(3)
147 };
148 btns[1].onclick = function () {
149 buju(4)
150 };
151 btns[2].onclick = function () {
152 buju(5)
153 };
154
155 function buju(num) {
156 for (var i = 0; i < items.length; i++) {
157 items[i].style.float = 'left';
158 items[i].parentNode.style.width = items[i].offsetWidth * num + 'px';
159 }
160 }
161 }
162 </script>
163 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>九宫格布局plus</title>
6 <style type="text/css">
7 *{
8 padding: 0;
9 margin: 0;
10 }
11 #wrap{
12 position: relative;
13 }
14 #wrap .item{
15 width: 248px;
16 height: 360px;
17 font-size: 13px;
18 }
19 #wrap .item .title{
20 width: 248px;
21 height: 30px;
22 line-height: 30px;
23 overflow: hidden;
24 margin-bottom: 10px;
25 }
26 .imgContainer{
27 width: 248px;
28 display: table-cell;
29 text-align: center;
30 }
31 #wrap .item .price{
32 color:#ff6700;
33 font-size: 18px;
34 font-weight: bold;
35 }
36
37
38 </style>
39 </head>
40 <body>
41 <div class="cols">
42 <button>3列</button>
43 <button>4列</button>
44 <button>5列</button>
45 </div>
46 <div id="wrap">
47 <div class="item">
48 <div class="imgContainer">
49 <img src="images/taobao_1.jpg" alt="">
50 </div>
51 <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p>
52 <p class="price">¥69</p>
53 </div>
54 <div class="item">
55 <div class="imgContainer">
56 <img src="images/taobao_2.jpg" alt="">
57 </div>
58 <p class="title">百搭开春装女胖mm夏季显瘦2019新款大码韩版</p>
59 <p class="price">¥69</p>
60 </div>
61 <div class="item">
62 <div class="imgContainer">
63 <img src="images/taobao_3.jpg" alt="">
64 </div>
65 <p class="title">婚纱2019新款欧美韩式孕妇婚纱高腰韩版</p>
66 <p class="price">¥69</p>
67 </div>
68 <div class="item">
69 <div class="imgContainer">
70 <img src="images/taobao_4.jpg" alt="">
71 </div>
72 <p class="title">点上衣很仙的女装夏2019新款洋气打底衫</p>
73 <p class="price">¥90</p>
74 </div>
75 <div class="item">
76 <div class="imgContainer">
77 <img src="images/taobao_5.jpg" alt="">
78 </div>
79 <p class="title">大码女装胖MM文艺时尚格子圆点显瘦连衣裙</p>
80 <p class="price">¥78</p>
81 </div>
82 <div class="item">
83 <div class="imgContainer">
84 <img src="images/taobao_6.jpg" alt="">
85 </div>
86 <p class="title">2019夏季新款女装韩版修身显瘦V领无袖</p>
87 <p class="price">¥89</p>
88 </div>
89 <div class="item">
90 <div class="imgContainer">
91 <img src="images/taobao_7.jpg" alt="">
92 </div>
93 <p class="title">春季短款小外套女2019春装春秋新款韩</p>
94 <p class="price">¥100</p>
95 </div>
96 <div class="item">
97 <div class="imgContainer">
98 <img src="images/taobao_8.jpg" alt="">
99 </div>
100 <p class="title">大码女装中长款针织衫春装胖mm显瘦</p>
101 <p class="price">¥120</p>
102 </div>
103 <div class="item">
104 <div class="imgContainer">
105 <img src="images/taobao_9.jpg" alt="">
106 </div>
107 <p class="title">春款韩版2019新款女装时尚初春两件套</p>
108 <p class="price">¥107</p>
109 </div>
110 <div class="item">
111 <div class="imgContainer">
112 <img src="images/taobao_10.jpg" alt="">
113 </div>
114 <p class="title">牛仔外套女短款2019春装新款女装韩版</p>
115 <p class="price">¥69</p>
116 </div>
117 <div class="item">
118 <div class="imgContainer">
119 <img src="images/taobao_11.jpg" alt="">
120 </div>
121 <p class="title">2019夏季新款女装裙子纯色流苏a字裙</p>
122 <p class="price">¥56</p>
123 </div>
124 <div class="item">
125 <div class="imgContainer">
126 <img src="images/taobao_12.jpg" alt="">
127 </div>
128 <p class="title">女装休闲短袖韩版宽松2019新款春夏季</p>
129 <p class="price">¥76</p>
130 </div>
131 <div class="item">
132 <div class="imgContainer">
133 <img src="images/taobao_13.jpg" alt="">
134 </div>
135 <p class="title">棉上衣女装秋季新款2019早春休闲时尚</p>
136 <p class="price">¥45</p>
137 </div>
138 </div>
139 <script type="text/javascript">
140 // 1.获取标签
141 var btns = document.getElementsByTagName('button');
142 var items = document.getElementsByClassName('item');
143
144 // 2.监听按钮的点击
145 btns[0].onclick = function(){
146
147 // 3.循环
148 mjj_flex(3);
149 }
150 btns[1].onclick = function(){
151
152 mjj_flex(4)
153
154 }
155 btns[2].onclick = function(){
156
157 mjj_flex(5);
158 }
159
160 function mjj_flex(colsNum){
161 // 第0行第0列 top: row * h left: col* w
162 // 第0行第1列 top: 0 * h left: 1* w
163 // 第0行第2列 top: 0 * h left: 2* w
164 // 第1行第0列 top: 1 * h left: 0 * w
165 // 第1行第1列 top: 1 * h left: 1 * w
166 // 第1行第2列 top: 1 * h left: 2* w
167 // 第2行第0列 top: 2 * h left: 0* w
168 // 第2行第1列 top: 2 * h left: 0* w
169 // 第2行第2列 top: 2 * h left: 0* w
170 for(var i = 0; i < items.length; i++){
171 // 求每个盒子占得行数和列数 10 3行 1列
172 // 11 3行 2列
173 var row = parseInt(i / colsNum);
174 var col = parseInt(i % colsNum);
175 // 设置盒子定位
176 items[i].style.position = 'absolute';
177 items[i].style.top = (row * items[i].offsetHeight) + 'px';
178 items[i].style.left = (col * items[i].offsetWidth) + 'px';
179 }
180
181
182 }
183
184 </script>
185
186 </body>
187 </html>