九宫格布局
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>