Question

I tried to use PHP to make DIV random positions. we can look each 100px as a unit, type one small div is 1*1 ,type two small div is 1*2, type three small div is 2*1. All divs only allow show in a big div box 10*6. Here is my code.

<?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>';
?>

I still have some css questions. in my code, I make postion:absolute and top left setting, but some divs will overlapping. how to solve it? Thanks.

Answer 1

1) You should use “return” instead of “echo” in the end line of 3 div functions so that array sizes can have any effect

2) Your problem is not standard, it is a little bit mathematical challenge, you must do “remembering” of positions and shuffling by hand

3) can this below code be your solution ? ( 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>';
?>