Question

我试图让一系列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; }

Answer 1

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

你的问题就在这里。您每次都会将每个方框的建议位置与同一个方框的当前位置（默认为左上角）进行比较。因此，只要建议的位置不在左上角，它就会始终允许该位置。您不想与thisTag（每次尝试放置相同的标记）进行比较，而是要与每个（）循环中的迭代器变量x进行比较。

没有重叠的Div随机定位

1 个答案: