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

求好手给一个Metro风格布局

WBOY
Release: 2016-06-13 12:10:16
Original
978 people have browsed it

求高手给一个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 />
Copy after login

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template