21 九宫格布局

深碍√TFBOYSˉ_ 2021-10-18 15:32 394阅读 0赞

### 九宫格布局 ###

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>

转载于:https://www.cnblogs.com/znyyy/p/11129832.html