PHP 混合显示 进阶问题

Question

感谢xuzuning和T5500两位昨天的帮助。昨天3种 P 都用了float：left，今天应需要，又加1种 P 类型，100*40的。另外在排版上，全部float：left看上去很死板，全都挤在DIV的上沿，所有修改了一下，给所有的 P 设置了position:absolute;以及TOP和LEFT的值。这样看上去美观多了。但是又有新的问题出现了：随机top和left值会出现多个p元素重叠的现象。如何避免呢？我的思路是：可以把100*20看做一个基本网格单位。f1 为1*1， f2为2*1，f3为3*1，f4为1*2，然后避免面积（或坐标位置）不要重叠。但是如何把判断代码写进四个function里面？具体该如何解决？又要请教前辈们了。谢谢大家。
<style>
*,p{padding:0;margin:0;}
</style>
<?php
function f1($row){
$choose1 = array("0","100","200","300","400","500","600","700","800","900");
$choose = array("0","20","40","60","80","100","120","140","160","180");
        $rand_keys = array_rand($choose, 1);
$rand_keys1 = array_rand($choose1, 1);
echo '<p style="position:absolute;top:'.$choose[$rand_keys].'px;left:'.$choose1[$rand_keys1].'px;width:100px;height:20px;background:#999 none;">'.$row['word'].'</p>';
}
function f2($row){
$choose1 = array("0","100","200","300","400","500","600","700","800");
$choose = array("0","20","40","60","80","100","120","140","160","180");
        $rand_keys = array_rand($choose, 1);
$rand_keys1 = array_rand($choose1, 1);
echo '<p style="position:absolute;top:'.$choose[$rand_keys].'px;left:'.$choose1[$rand_keys1].'px;width:200px;height:20px;background:#ccc none;">'.$row['word'].'</p>';
}
function f3($row){
$choose1 = array("0","100","200","300","400","500","600","700");
$choose = array("0","20","40","60","80","100","120","140","160","180");
        $rand_keys = array_rand($choose, 1);
$rand_keys1 = array_rand($choose1, 1);
echo '<p style="position:absolute;top:'.$choose[$rand_keys].'px;left:'.$choose1[$rand_keys1].'px;width:300px;height:20px;background:#eee none;">'.$row['word'].'</p>';
}
function f4($row){
$choose1 = array("0","100","200","300","400","500","600","700","800","900");
$choose = array("0","20","40","60","80","100","120","140","160");
        $rand_keys = array_rand($choose, 1);
$rand_keys1 = array_rand($choose1, 1);
echo '<p style="position:absolute;top:'.$choose[$rand_keys].'px;left:'.$choose1[$rand_keys1].'px;width:100px;height:40px;background:#fff none;">'.$row['word'].'</p>';
}
echo '<div style="width:1000px;height:200px;background-color:#333;">';for($i = 0; $i < 15; $i ++) $sizes[] = f1($row);
for($i = 0; $i < 10; $i ++) $sizes[] = f2($row);
for($i = 0; $i < 5; $i ++) $sizes[] = f3($row);
for($i = 0; $i < 10; $i ++) $sizes[] = f4($row);
shuffle($sizes);for($i = 0; $i < 40; $i ++) echo $sizes[$i];
?>

Answer 1

你可以尝试一下用jQuery的一个流体布局插件来解决。
看一下效果：http://masonry.desandro.com/?resources/jquery-masonry

Answer 2

我看那个网站了！其实只用css当一层的那几个，想1、2、3、4一层，用一个div包住，5、6、7一组，8.9.10.一组当外边这个div的overflow：hidden的时候就一层一层的显示，当没有overflow或者auto的时候就变成见空就挤的样式了！

Answer 3

人家要用php实现，你们谈论js和css干什么？

Answer 4

看到了，那个JS的很不错。
弱弱的问一下，纯PHP可以实现吗？貌似有思路，但是不知道该怎么用代码来实现。

Answer 5

网上又找到个有趣的PHP代码：<style>
*,p{padding:0;margin:0;}
</style>
<?php
function divHtml($dtype, $x, $y) 
{  $ww =($dtype ==3) ?'200px':'100px';    $hh =($dtype==2)?'40px':'20px'; $bgcols =array('#999', '#ccc', '#eee');
   $xx =($x*100) .'px';                   $yy =($y*20) .'px';              $bgc    =$bgcols[$dtype-1];
   return "<p style='position:absolute; width:$ww;height:$hh; left:$xx;top:$yy; background:$bgc;'> $dtype </p>";
}
$divs =array(); 
$cells =array(); 
for ($i=0; $i<60; $i++) $cells[$i] =0;  function reserve($dtype, $x, $y) 
{  global $cells, $divs;      if ($y*10+$x >59 ||($cells[$y*10+$x])) return false;
   switch ($dtype)
   {  case 2: if ($y ==5 || $cells[$y*10+$x] ||$cells[($y+1)*10+$x]) return false;  $cells[($y+1)*10+$x] =1; break;
      case 3: if ($x ==9 || $cells[$y*10+$x] ||$cells[$y*10+$x+1])   return false;  $cells[$y*10+$x+1] =1;   break;
   }
   $cells[$y*10+$x] =1;      $divs[] =divHtml($dtype, $x, $y);       return true;
} for($i = 0; $i < 10; $i ++) while (!reserve(2, rand(0,9), rand(0,5))) ;
for($i = 0; $i < 10; $i ++) while (!reserve(3, rand(0,9), rand(0,5))) ;
for($i = 0; $i < 60; $i ++) if (!$cells[$i]) reserve(1, $i%10, floor($i/10)) ; echo '<div style="position:absolute; width:1000px;height:200px;">';
   foreach ($divs as $single) echo $single;
echo '</div>';
?>但三种类型的 P 全部面积都是均分的。如何设置成我需要的那种，4种类型的P，数量按我的要求，剩余的面积background:#FFF ? 谢谢。

Answer 6

10楼代码里的：function divHtml($dtype, $x, $y) 
{ $ww =($dtype ==3) ?'200px':'100px'; $hh =($dtype==2)?'40px':'20px'; $bgcols =array('#999', '#ccc', '#eee');
  $xx =($x*100) .'px'; $yy =($y*20) .'px'; $bgc =$bgcols[$dtype-1];
  return "<p style='position:absolute; width:$ww;height:$hh; left:$xx;top:$yy; background:$bgc;'> $dtype </p>";
}如何添加'300px'到 $ww =($dtype ==3) ?'200px':'100px'; 里面，也就是再加一种类型，width:$ww;（width：300px）？