Home  >  Article  >  Backend Development  >  求好手给一个Metro风格布局

求好手给一个Metro风格布局

WBOY
WBOYOriginal
2016-06-13 12:10:16912browse

求高手给一个Metro风格布局
用table,初始表格共3行6列
单元格三种规格:1x1  2x1  2x2 ,随机
如下图所示:

谢谢!
------解决思路----------------------
给你个思路,自己调整去吧

$ar = array(<br />  array('1x2', '我是标题'),<br />  array('2x2', '我是标题'),<br />  array('1x2', '我是标题'),<br />  array('2x2', '我是标题'),<br />  array('1x1', '我是标题'),<br />  array('1x1', '我是标题'),<br />  array('1x2', '我是标题'),<br />  array('1x2', '我是标题'),<br />  array('2x2', '我是标题'),<br />  array('2x2', '我是标题'),<br />  array('1x1', '我是标题'),<br />  array('1x1', '我是标题'),<br />  array('1x1', '我是标题'),<br />  array('1x1', '我是标题'),<br />);<br />shuffle($ar);<br />$box = array(<br />  array(1, 1, 1, 1, 1, 1),<br />  array(1, 1, 1, 1, 1, 1),<br />  array(1, 1, 1, 1, 1, 1),<br />);<br />$res = array();<br />foreach($ar as $ind=>$item) {<br />  list($h, $w) = explode('x', $item[0]);<br /><br />  //从左上角开始查找摆放的位置<br />  $flag = 0;<br />  for($y=0; $y<count($box); $y++) {<br />    for($x=0; $x<count($box[$y]); $x++) {<br />      if($box[$y][$x] == 1 && isset($box[$y+$h-1][$x+$w-1]) && $box[$y+$h-1][$x+$w-1] == 1) {<br />        $flag++;<br />        break 2;<br />      }<br />    }<br />  }<br />  if($flag) {<br />    $res[$y][] = array('c' => $w, 'r' => $h, 'v' => $ind);<br />    for($i=0; $i<$h; $i++) {<br />      for($j=0; $j<$w; $j++) {<br />        $box[$y+$i][$x+$j] = 0;<br />      }<br />    }<br />  }<br />}<br /><br />echo "<table border=1   style="max-width:90%">";<br />foreach($res as $row) {<br />  echo '<tr>';<br />  foreach($row as $cell) {<br />    echo "<th colspan=$cell[c] rowspan=$cell[r]>{$ar[$cell['v']][1]}</th>";<br />  }<br />  echo '</tr>';<br />}<br />echo "</table>";<br />

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn