我尝试使用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。如何解决?谢谢。
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>';
?>