0
私は、一連のdivを、重複しない別のdiv内にランダムに配置しようとしています。重複しないようにするのに問題がありますが、理由を理解できないようです。私は実行するためにスクリプト全体を添付しましたが、私は最後に残したコードに問題があると思います。Divオーバーラップのないランダムポジショニング
<?php
$number_of_tags = 7; // Number of tags in tag cloud, excluding search box
$tags = array(); // Initiate tags() array
$weight = array(); // Initiate weight() array
// This function generates random tags
// Not needed when fetching from database
function generate_tag() {
$tag_min_length = 5;
$tag_max_length = 30;
$letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
for ($a = 0; $a <= rand($tag_min_length,$tag_max_length); $a++) {
$b = rand(0, strlen($letters) - 1);
$tag .= $letters[$b];
}
return $tag;
}
for($i=0; $i<$number_of_tags;$i++){
$tags[$i][0] = generate_tag();
$tags[$i][1] = rand(10,22); // Font size between 10 and 22, random. Replace with weight from database
}
?>
<!doctype html>
<html>
<head>
<title>smoketag</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<style>
#tag_cloud {
border: 1px solid #000;
width: 600px;
height: 200px;
}
.tag {
background: #ccc;
border-radius: 4px;
cursor: pointer;
float: left;
margin: 3px;
padding: 7px;
position: absolute;
top: 0px;
left: 0px;
}
.tag:hover {
background: #aaa;
}
.searchbox {
cursor: auto;
width: 300px;
}
</style>
</head>
<body>
<div id="tag_cloud">
<input class="tag searchbox" type="textbox">
<?php
foreach($tags as $k=>$v){
echo "<div class='tag alive' id='tag_".$k."' style='font-size:".$v[1]."px;'>".$v[0]."</div>";
}
?>
</div>
<script>
var boundries = new Array();
function checkBoundries(tag_id){
var thisTag = $("#tag_"+tag_id);
var max_top = $("#tag_cloud").outerHeight() - thisTag.outerHeight(true);
var max_left = $("#tag_cloud").outerWidth() - thisTag.outerWidth(true);
// propose new location
var proposedTop = Math.floor(Math.random()*parseInt(max_top));
var proposedLeft = Math.floor(Math.random()*parseInt(max_left));
var top = proposedTop;
var right = proposedLeft + thisTag.outerWidth(true);
var bottom = proposedTop + + thisTag.outerHeight(true);
var left = proposedLeft;
console.log(" "+top+" ");
console.log(left+" "+right);
console.log(" "+bottom+" ");
// check curent tags for conflicts
var fullPass = true;
$(".tag").each(function(x){
if(tag_id!=x){
var c_top = parseInt(thisTag.css('top')); // Top
var c_right = parseInt(thisTag.css('left')) + thisTag.outerWidth(true);// Right
var c_bottom = parseInt(thisTag.css('top')) + thisTag.outerHeight(true); // Bottom
var c_left = parseInt(thisTag.css('left')); // Left
var passed = true;
var height_conflict = false;
var width_conflict = false;
if(((top<=c_bottom)&&(top>=c_top))||((bottom<=c_bottom)&&(bottom>=c_top))){ var height_conflict = true; }
if(((right<=c_left)&&(right>=c_right))||((left>=c_left)&&(left<=c_right))){ var width_conflict = true; }
//console.log(height_conflict + " " + width_conflict);
if((height_conflict)&&(width_conflict)){ passed = false; }
console.log(tag_id + ':' + x + " -- " + passed);
if(passed==false){
//checkBoundries(tag_id);
fullPass = false;
console.log("RESET");
return false;
}
}
});
if(fullPass==true){
// No conflicts. Move tag to new location
//thisTag.css('top',Math.floor(Math.random()*parseInt(max_top)));
//thisTag.css('left',Math.floor(Math.random()*parseInt(max_left)));
thisTag.css({top: proposedTop+"px"});
thisTag.css({left: proposedLeft+"px"});
console.log('moving: ' + tag_id + " --- top: " + top + " --- left: " + left);
return true;
} else {
return false;
}
}
$(document).ready(function(){
// Set textbox to center
$(".searchbox").css('top', (parseInt($("#tag_cloud").height())/2) - ($(".searchbox").height()/2)+"px");
$(".searchbox").css('left', (parseInt($("#tag_cloud").width())/2) - ($(".searchbox").width()/2)+"px");
// Start building
for(var i=0;i<7;i++){
while(checkBoundries(i)==false){
// do nothing
}
}
});
</script>
</body>
</html>
私は、問題は、このロジックであると思う：
if(((top<=c_bottom)&&(top>=c_top))||((bottom<=c_bottom)&&(bottom>=c_top))){ var height_conflict = true; }
if(((right<=c_left)&&(right>=c_right))||((left>=c_left)&&(left<=c_right))){ var width_conflict = true; }
あなたはそれが悪いと思っていますか？また、なぜあなたは空白を嫌うのですか？それはあなたに何をしたのですか？ – xaxxon
私はそれがなぜそのように貼り付けているのかわかりません、私のIDEでうまく見えます。 私が見ていることは、divがまだ重複していることです。 –
しかし、あなたはそれがしたくないコードは何ですか？それともあなたがしたいことをやっていないのですか？ – xaxxon