其他分享
首页 > 其他分享> > 九宫格布局

九宫格布局

作者:互联网

  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