求好手给一个Metro风格布局

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

谢谢！
------解决思路----------------------
给你个思路，自己调整去吧

$ar = array(
  array('1x2', '我是标题'),
  array('2x2', '我是标题'),
  array('1x2', '我是标题'),
  array('2x2', '我是标题'),
  array('1x1', '我是标题'),
  array('1x1', '我是标题'),
  array('1x2', '我是标题'),
  array('1x2', '我是标题'),
  array('2x2', '我是标题'),
  array('2x2', '我是标题'),
  array('1x1', '我是标题'),
  array('1x1', '我是标题'),
  array('1x1', '我是标题'),
  array('1x1', '我是标题'),
);
shuffle($ar);
$box = array(
  array(1, 1, 1, 1, 1, 1),
  array(1, 1, 1, 1, 1, 1),
  array(1, 1, 1, 1, 1, 1),
);
$res = array();
foreach($ar as $ind=>$item) {
  list($h, $w) = explode('x', $item[0]);

  //从左上角开始查找摆放的位置
  $flag = 0;
  for($y=0; $y<count($box); $y++) {
    for($x=0; $x<count($box[$y]); $x++) {
      if($box[$y][$x] == 1 && isset($box[$y+$h-1][$x+$w-1]) && $box[$y+$h-1][$x+$w-1] == 1) {
        $flag++;
        break 2;
      }
    }
  }
  if($flag) {
    $res[$y][] = array('c' => $w, 'r' => $h, 'v' => $ind);
    for($i=0; $i<$h; $i++) {
      for($j=0; $j<$w; $j++) {
        $box[$y+$i][$x+$j] = 0;
      }
    }
  }
}

echo "<table border=1 style='width:100%; table-layout:fixed;'>";
foreach($res as $row) {
  echo '<tr>';
  foreach($row as $cell) {
    echo "<th colspan=$cell[c] rowspan=$cell[r]>{$ar[$cell['v']][1]}</th>";
  }
  echo '</tr>';
}
echo "</table>";