уникални позиции

M

MontefuckeR

Registered
Идеята е следната имаме 100 дива един до друг, но трябва да бъдат разхвърляни на екрана само наляво и надясно, без нагоре и надолу, но уникални позиции, за да не застават много близо един до друг, целта на всичко това е всеки див да бъде "хвърлен" на различни позиции от дивовете покрай него.

Прикачвам снимка:
3157.jpg

с червено съм оградил как НЕ трябва да се получава.
 
Ами направих нещо, но не знам дали ще ти хареса :)
Код: 
<?php
echo "<html>
<head>
	<title>Random divs</title>
	<style type=\"text/css\">
		* {
			margin: 0;
			padding: 0;
		}
		body { 
			width: 1280px;
			height: auto;
		}
		.general {
			float: left;
			width: auto;
			height: auto;
		}
		.random {
			background: #123534;
			width: 50px;
			height: 50px;
		}
	</style>
</head>
<body>";
for($i=0;$i<100;$i++) {
$a1 = rand(0,40);
$b1 = rand(0,40);
$c1 = rand(0,40);
$d1 = rand(0,40);
$a2 = rand(0,40);
$b2 = rand(0,40);
$c2 = rand(0,40);
$d2 = rand(0,40);
$a3 = rand(0,40);
$b3 = rand(0,40);
$c3 = rand(0,40);
$d3 = rand(0,40);
echo "
	<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" style=\"width: 50%;\">
		<tr>
			<td><div class=\"random\" style=\"margin-top: $a1; margin-left: $b1; margin-bottom: $c1; margin-right: $d1;\"></div></td>
			<td><div class=\"random\" style=\"margin-top: $a2; margin-left: $b2; margin-bottom: $c2; margin-right: $d2;\"></div></td>
			<td><div class=\"random\" style=\"margin-top: $a3; margin-left: $b3; margin-bottom: $c3; margin-right: $d3;\"></div></td>
		</tr>
		<div class=\"random\" style=\"margin-top: $a1; margin-left: $b1; margin-bottom: $c1; margin-right: $d1;\"></div>
	</table>";
/*echo "
	<div class=\"general\">
		<div class=\"random\" style=\"margin-top: $a1; margin-left: $b1; margin-bottom: $c1; margin-right: $d1;\"></div>
		<div class=\"random\" style=\"margin-top: $a2; margin-left: $b2; margin-bottom: $c2; margin-right: $d2;\"></div>
		<div class=\"random\" style=\"margin-top: $a3; margin-left: $b3; margin-bottom: $c3; margin-right: $d3;\"></div>
	</div>
	";*/
}
echo "
</body>
</html>";
?>

Ако първият вариант не ти харесва мисля, че знаеш как да махнеш коментара и кода с таблицата преди него и да пробваш другия дали ще те задоволи :)
 
Не стават ефекта не е това, което търся, в цикъла трябва да имаме само един див, а не 3 и с отделни позиции, целта е да не се падат едно под друго както се случва с твоите, и моите, ето моя код да се ориентираш г/д...:

<?php
for($i = 5;$i<=120;$i++)
{
$left[$i] = mt_rand(22,80);
$left2 = $left[$i];
$left3 = $left[$i-1];
$tot_left = ($left2 > $left3) ? $left2-$left3 : $left3-$left2;
$end_left = ($tot_left < 40) ? $tot_left+mt_rand(60,170) : $tot_left;

?>
<div style="margin: 0px auto 0 <?=$end_left?>px;float:left;">
<img width="35px" height="40px" src="http://web-tourist.net/forum/images/avatars/9411168144b83014262163.jpg">
</div>

<?php
}
?>
Увеличете...

кода работи, но пак се случва, някой див под него или над него точно да има друг (не говоря да се застъпват)
 
Опитай нещо от рода на:

$w = 400 - ширина на полето

$d = 10 - ширина на дива


for ( ....) {

$x = $d * rand(0,39); // --> 400/10 -10, $w/$d - $d

echo "<div style='top:{$y)px; left:{$x)px'>Content...</div>";

}

Ако е небходимо направи го и за $y
 
MontefuckeR каза:
широчината и височината на дива винаги е една...
Увеличете...


В моя пример не се променят. Само нагласяваш позицията.

Просто задай параметъра (втората стойност в rand) да бъде равен на широчината на полето разделена на ширината на див-а.
 
и след като не се променя целта каква е ? :shock:
ако сметнем, че на първи ред има 1 див и е на 120 пиксела от ляво надясно, то на втория ред дива трябва да е на 150 примерно, защото ако се падне 120 или 124 пиксела ще бъде под този на първия ред, което не искам да става...
нещо като шахматно трябва да са подредени :?

Ето отново снимка:
Ограденото в червено не трябва да се случва, забележете ограденото в зелено, нещо такова искам по този начин да се разпределят...
3159.jpg
 
<style type="text/css">
.random {
width: 15px;
height: 15px;
border: 1px solid blue;
position: absolute;
}
</style>

<div style="width:500px; height:500px; border:1px solid red; position: relative;">
<?php

for ($i = 0; $i < 25; $i++)
{
$z = 60 * ($i % 2);

for ($j = 0; $j < 4; $j++)
{
$x = $j * 120 + $z + 3 + rand(0, 35) + $i;

$y = $i * 20 + 3;

echo "<div class='random' style='top:{$y}px; left:{$x}px;'> </div>";
}
}

?>
</div>
 
По твоя начин май става, но топ трябва да е -15примерно да се позастъпват, и тогава вече се губи това позициониране едно от друго...
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе