21 九宫格布局

九宫格布局

  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>

 

九宫格布局plus

  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>

 

posted @ 2019-07-03 23:41  毛斯钢  阅读(580)  评论(0)  编辑  收藏  举报