2
我有一個包含在它的中間+ 15周隨機定位的div是借鑑數據庫的內容一個字段用戶輸入形式的單頁。我已經設法讓他們不要相互重疊，但不能爲中間的形式div做到這一點。所以我玩弄了z-index，讓它們躲在它後面，如果它們重疊的話。DIV重疊不起作用每次
我注意到的是，他們並不總是落在後面。有時他們確實隱藏在輸入字段的後面，而其他時候它們出現在輸入字段的前面。
這是我到目前爲止的代碼：
在我更換了硬編碼的文本數據的動態PHP代碼的HTML代碼，只是爲了展示功能的緣故。
$(window).load(function(){
var maxSearchIterations = 15;
var min_x = 50;
var max_x = 900;
var min_y = 0;
var max_y = 700;
var filled_areas = [];
function calc_overlap(a1) {
var overlap = 0;
for (i = 0; i < filled_areas.length; i++) {
var a2 = filled_areas[i];
// no intersection cases
if (a1.x + a1.width < a2.x) {
continue;
}
if (a2.x + a2.width < a1.x) {
continue;
}
if (a1.y + a1.height < a2.y) {
continue;
}
if (a2.y + a2.height < a1.y) {
continue;
}
// If there is an intersection, calculate it.
var x1 = Math.max(a1.x, a2.x);
var y1 = Math.max(a1.y, a2.y);
var x2 = Math.min(a1.x + a1.width, a2.x + a2.width);
var y2 = Math.min(a1.y + a1.height, a2.y + a2.height);
var intersection = ((x1 - x2) * (y1 - y2));
overlap += intersection;
}
return overlap;
}
function randomize() {
filled_areas.splice(0, filled_areas.length);
var index = 0;
$('.word').each(function() {
var rand_x = 0;
var rand_y = 0;
var i = 0;
var smallest_overlap = 9007199254740992;
var best_choice;
var area;
for (i = 0; i < maxSearchIterations; i++) {
rand_x = Math.round(min_x + ((max_x - min_x) * (Math.random() % 1)));
rand_y = Math.round(min_y + ((max_y - min_y) * (Math.random() % 1)));
area = {
x: rand_x,
y: rand_y,
width: $(this).width(),
height: $(this).height()
};
var overlap = calc_overlap(area);
if (overlap < smallest_overlap) {
smallest_overlap = overlap;
best_choice = area;
}
if (overlap === 0) {
break;
}
}
filled_areas.push(best_choice);
$(this).css({
position: "absolute",
"z-index": index++
});
$(this).animate({
left: rand_x,
top: rand_y
});
});
return false;
}
randomize();
}); #gimme_secrets {
\t margin-top: 20%;
\t \t position: relative;
\t \t
}
.word {
position: absolute;
font-size: 30px;
background-color: rgba(255,255,255,0.5);
opacity: 0.3;
z-index:9999;
}
.searchbox {
cursor: auto;
width: 500px;
height: 30px;
background-color : #d1d1d1;
}
#gimme_secrets{
\t z-index : 10;
}
html, body {
margin: 0;
height: 100%;
overflow: hidden
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Testing random words.</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>
<script language="javascript" type="text/javascript" src="randomizer.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
\t
\t <form action="process.php" method="post" accept-charset="utf-8">
\t \t <div id="gimme_secrets" align="center">
\t \t \t <div class="secret_label">Gimme gimme gimme?</div>
\t \t \t <input class="tag searchbox" type="text" name="Secret"/><br/>
\t \t \t <input class="button" type="submit" value="Share It!" /><br/>
\t \t \t <div>(This is completely, utterly anonymous!)</div>
\t \t </div>
\t </form>
\t <!-- divs that will be randomly placed. -->
<div id="word0" class="word">This is just a test.1</div>
<div id="word1" class="word">This is just a test.2</div>
<div id="word2" class="word">This is just a test.3</div>
<div id="word3" class="word">This is just a test.4</div>
<div id="word4" class="word">This is just a test.5</div>
<div id="word5" class="word">This is just a test.6</div>
<div id="word6" class="word">This is just a test.7</div>
<div id="word7" class="word">This is just a test.8</div>
<div id="word8" class="word">This is just a test.9</div>
\t
\t
</body>
</html>任何幫助表示讚賞。先謝謝你。
代碼太多，只能留下重要的部分。 –