Question

我尝试使用PHP来制作DIV随机位置。我们可以将每个100px看作一个单元，类型一个小div为1 * 1，类型二小div为1 * 2，类型三小div为2 * 1。所有div只允许在10 * 6的大div框中显示。这是我的代码。

<?php
function DIV1()
{
    $choose1 = array("0","100","200","300","400","500","600","700","800","900");
    $choose = array("0","100","200","300","400","500");
    $rand_keys = array_rand($choose, 1);
    $rand_keys1 = array_rand($choose1, 1);
    echo "<div style=\"position:absolute;top:".$choose[$rand_keys]."px;left:".$choose1[$rand_keys1]."px;width:100px;height:100px;background:#ff0 none;\"></div>";
}
function DIV2()
{
    $choose1 = array("0","100","200","300","400","500","600","700","800","900");
    $choose = array("0","100","200","300","400");
    $rand_keys = array_rand($choose, 1);
    $rand_keys1 = array_rand($choose1, 1);
    echo "<div style=\"position:absolute;top:".$choose[$rand_keys]."px;left:".$choose1[$rand_keys1]."px;width:100px;height:200px;background:#f00 none;\"></div>";
}
function DIV3()
{
    $choose1 = array("0","100","200","300","400","500","600","700","800");
    $choose = array("0","100","200","300","400","500");
    $rand_keys = array_rand($choose, 1);
    $rand_keys1 = array_rand($choose1, 1);
    echo "<div style=\"position:absolute;top:".$choose[$rand_keys]."px;left:".$choose1[$rand_keys1]."px;width:200px;height:100px;background:#00f none;\"></div>";
}
echo '<div style="width:1000px;height:600px;">';

$sizes = array();
for($i = 0; $i < 15; $i ++) $sizes[] = DIV1($row);
for($i = 0; $i < 10; $i ++) $sizes[] = DIV2($row);
for($i = 0; $i < 5; $i ++) $sizes[] = DIV3($row);
shuffle($sizes);

for($i = 0; $i < 30; $i ++) echo $sizes[$i];
echo '</div>';
?>

我还有一些css问题。在我的代码中，我设置了postion:absolute和top left，但有些div会overlapping。怎么解决？感谢。

Answer 1

1）你应该在3 div函数的结束行中使用“return”而不是“echo”，以便数组大小可以产生任何影响

2）你的问题不标准，这是一个有点数学挑战，你必须“记住”位置并手动洗牌

3）以下代码可以作为您的解决方案吗？（test here）

<?php
function divHtml($dtype, $x, $y) //$dtype: (1)=1x1yellow, (2)=1x2, (3)=2x1, (4)=1x1white
{  $ww =($dtype ==3) ?'200px':'100px';    $hh =($dtype==2)?'200px':'100px'; $bgcols =array('#ff0', '#f00', '#00f', '#fff');
   $xx =($x*100) .'px';                   $yy =($y*100) .'px';              $bgc    =$bgcols[$dtype-1];
   return "<div style='position:absolute; width:$ww;height:$hh; left:$xx;top:$yy; background:$bgc;'> $dtype </div>";
}
$divs =array(); //real divs array (html inside)
$cells =array(); //logical filled/notFilled (0/1) 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))) ; //adding 10 blocks of type2 (20cellsTotal)
for($i = 0; $i < 5; $i ++)  while (!reserve(3, rand(0,9), rand(0,5))) ; //adding  5 blocks of type3 (10cellsTotal)
for($i = 0; $i < 15; $i ++) while (!reserve(1, rand(0,9), rand(0,5))) ; //adding 15 blocks of type1 (15cellsTotal)
for($i = 0; $i < 60; $i ++) if (!$cells[$i]) reserve(4, $i%10, floor($i/10)) ; //filling rest 15 cells with type4
               //^go through all cells, but filling only 15

echo '<div style="position:absolute; width:1000px; height:600px;">';
   foreach ($divs as $single) echo $single;
echo '</div>';
?>

PHP随机DIV与CSS问题

1 个答案: