Reputation: 9221
I am tried to use PHP to make DIV random positions. Here is my code.
<?php
function DIV1()
{
$choose = array("left", "right");
$rand_keys = array_rand($choose, 1);
echo "<div class=position1 style=\"float:left;width:100px;height:100px;background-color:#00f;float:".$choose[$rand_keys].";border:1px solid #000;\"></div>";
}
function DIV2()
{
$choose = array("left", "right");
$rand_keys = array_rand($choose, 1);
echo "<div class=position2 style=\"float:left;width:100px;height:200px;background-color:#f00;float:".$choose[$rand_keys].";border:1px solid #000;\"></div>";
}
function DIV3()
{
$choose = array("left", "right");
$rand_keys = array_rand($choose, 1);
echo "<div class=position3 style=\"float:left;width:200px;height:100px;background-color:#ff0;float:".$choose[$rand_keys].";border:1px solid #000;\"></div>";
}
echo '<div id="display" style="width:1016px;height:1016px;background-color:#333;">';
$count = Math.floor(rand()*25) +15;
for ($i=0; $i<$count; $i++)
{
echo DIV1();
echo DIV2();
echo DIV3();
}
echo '</div>';
?>
My code can mixed divs position. But I have 2 questions.
How to control 15 pieces 100*100
, 10 pieces 100*200
, 5 pieces 200*100
divs mixed random display?
How to control the white space part? I want show all the divs in the display zone. width:1016px;height:1016px;
, do not out of the div#display
.
Upvotes: 1
Views: 1084
Reputation: 24393
$sizes = array();
for ($i = 0; $i < 15; $i++) {
array_push($sizes, $array(100,100));
}
for ($i = 0; $i < 10; $i++) {
array_push($sizes, $array(100,200));
}
for ($i = 0; $i < 5; $i++) {
array_push($sizes, $array(200,100));
}
for ($i = 0; $i < 30; $i++) {
// Use array_rand() to pick out a random entry from $sizes and echo the div
}
About it not being out of the boundaries, just have it get a random top and left within those boundaries taking into account the width and height of the div.
Upvotes: 3