九宫格布局

Posted zhangzhengyang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了九宫格布局相关的知识,希望对你有一定的参考价值。

  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         #containerwidth: 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" >
 25                 <h4>因为遇见你</h4>
 26                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
 27             </div>
 28             <div class="box">
 29                 <img src="image/2.jpg" >
 30                 <h4>因为遇见你</h4>
 31                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
 32             </div>
 33             <div class="box">
 34                 <img src="image/3.jpg" >
 35                 <h4>因为遇见你</h4>
 36                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
 37             </div>
 38             <div class="box">
 39                 <img src="image/4.jpg" >
 40                 <h4>因为遇见你</h4>
 41                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
 42             </div>
 43             <div class="box">
 44                 <img src="image/1.jpg" >
 45                 <h4>因为遇见你</h4>
 46                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
 47             </div>
 48             <div class="box">
 49                 <img src="image/5.jpg" >
 50                 <h4>因为遇见你</h4>
 51                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
 52             </div>
 53             <div class="box">
 54                 <img src="image/6.jpg" >
 55                 <h4>因为遇见你</h4>
 56                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
 57             </div>
 58             <div class="box">
 59                 <img src="image/8.jpg" >
 60                 <h4>因为遇见你</h4>
 61                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
 62             </div>
 63             <div class="box">
 64                 <img src="image/10.jpg" >
 65                 <h4>因为遇见你</h4>
 66                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
 67             </div>
 68             <div class="box">
 69                 <img src="image/11.jpg" >
 70                 <h4>因为遇见你</h4>
 71                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
 72             </div>
 73             <div class="box">
 74                 <img src="image/12.jpg" >
 75                 <h4>因为遇见你</h4>
 76                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
 77             </div>
 78             <div class="box">
 79                 <img src="image/13.jpg" >
 80                 <h4>因为遇见你</h4>
 81                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
 82             </div>
 83             <div class="box">
 84                 <img src="image/14.jpg" >
 85                 <h4>因为遇见你</h4>
 86                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
 87             </div>
 88             <div class="box">
 89                 <img src="image/15.jpg" >
 90                 <h4>因为遇见你</h4>
 91                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
 92             </div>
 93             <div class="box">
 94                 <img src="image/1.jpg" >
 95                 <h4>因为遇见你</h4>
 96                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
 97             </div>
 98             <div class="box">
 99                 <img src="image/2.jpg" >
100                 <h4>因为遇见你</h4>
101                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
102             </div>
103             <div class="box">
104                 <img src="image/3.jpg" >
105                 <h4>因为遇见你</h4>
106                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
107             </div>
108             <div class="box">
109                 <img src="image/4.jpg" >
110                 <h4>因为遇见你</h4>
111                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
112             </div>
113             <div class="box">
114                 <img src="image/1.jpg" >
115                 <h4>因为遇见你</h4>
116                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
117             </div>
118             <div class="box">
119                 <img src="image/5.jpg" >
120                 <h4>因为遇见你</h4>
121                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
122             </div>
123             <div class="box">
124                 <img src="image/6.jpg" >
125                 <h4>因为遇见你</h4>
126                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
127             </div>
128             <div class="box">
129                 <img src="image/8.jpg" >
130                 <h4>因为遇见你</h4>
131                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
132             </div>
133             <div class="box">
134                 <img src="image/10.jpg" >
135                 <h4>因为遇见你</h4>
136                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
137             </div>
138             <div class="box">
139                 <img src="image/11.jpg" >
140                 <h4>因为遇见你</h4>
141                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
142             </div>
143             <div class="box">
144                 <img src="image/12.jpg" >
145                 <h4>因为遇见你</h4>
146                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
147             </div>
148             <div class="box">
149                 <img src="image/13.jpg" >
150                 <h4>因为遇见你</h4>
151                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
152             </div>
153             <div class="box">
154                 <img src="image/14.jpg" >
155                 <h4>因为遇见你</h4>
156                 <p>孙怡邓伦牵手演绎刺绣奇缘</p>
157             </div>
158             <div class="box">
159                 <img src="image/15.jpg" >
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 numberallCols
183      * @param objectparentNode
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>

 

以上是关于九宫格布局的主要内容,如果未能解决你的问题,请参考以下文章

21 九宫格布局

九宫格布局

[RN] React Native 使用 FlatList 实现九宫格布局

九宫格自适应布局

小程序UI设计-布局分解-九宫格

九宫格布局