Metro スタイルのレイアウトを教えてください

専門家にテーブルを使用した Metro スタイルのレイアウト
を提供してもらいました。以下の図に示すように、初期テーブルには 3 行 6 列
の 3 つのセル仕様があります: 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 />