Javascript 如何使用以前的跨距顶部和左侧位置放置其他跨距，以便它们不会'；不要互相重叠？_Javascript_Jquery_Html_Css

Javascript 如何使用以前的跨距顶部和左侧位置放置其他跨距，以便它们不会'；不要互相重叠？

javascript jquery html css

Javascript 如何使用以前的跨距顶部和左侧位置放置其他跨距，以便它们不会'；不要互相重叠？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我需要用Javascript用特定的硬编码单词制作一个标记云因此，对于这个非常轻量级的简单HTML代码： <body> <article></article> </body> 这些硬编码数据： var motsHorizontaux = [ 'prix', 'transmission', // ... 'valeur', 'fiscal' ]; var colors = [ 'Mediu

我需要用Javascript用特定的硬编码单词制作一个标记云

因此，对于这个非常轻量级的简单HTML代码：

<body>
    <article></article>
</body>

这些硬编码数据：

var motsHorizontaux = [
    'prix',
    'transmission',
    // ...
    'valeur',
    'fiscal'
];

var colors = [
    'MediumPurple',
    'MediumSeaGreen',
    // ...
    'PaleGreen',
    'PaleTurquoise',
];

var fonts = [
    'Arial',
    'Helvetica',
    // ...
    'Courrier New',
    'Lucida Console'
];

还有这些Javascript声明：

var random = function(min, max) {
    return Math.round(Math.random() * (max - min) + min, 0);
}
Number.prototype.between = function(a, b) {
    var min = Math.min.apply(Math, [a, b]),
        max = Math.max.apply(Math, [a, b])
    ;
    return this > min && this < max;
};

（此代码段嵌套在外部

for（）{}

循环中）

但这仍然使这些词相互重叠（即使我不得不承认，它们比以前少了）。我想我有一个错误的概念，因为

而（true）{}

循环将只应用于前面的单词（

$el

），因此删除了之前所有单词的检查（循环中的

if（&&&&&&&&&&&{}

）。有人能帮我修改代码吗？下面是代码片段：

jQuery（函数（$）{
var随机=函数（最小值、最大值）{
返回Math.round（Math.random（）*（max-min）+min，0）；
}
Number.prototype.between=函数（a，b）{
var min=Math.min.apply（数学[a，b]），
max=Math.max.apply（数学[a，b]）；
返回此>最小值和此<最大值（&T）；
};
var Motshorizontax=[
“大奖赛”，
“传输”，
"财政",，
"管理",，
"过程",，
"评估",，
"表演",，
“dirigant”，
“普雷维森奈尔”，
"期待",，
"适应",，
"suivi",，
“CONTROôle”，
"手推车",，
“clignotant”，
"预算",，
"协助",，
“地位”，
"社会",，
“优化”，
“projet”，
“瓦勒尔”，
“财政”
];
变量颜色=[
“MediumPurple”，
“中绿色”，
“中蓝”，
“中绿色”，
“中绿松石”，
“春绿”，
“钢铁蓝”，
"谭",，
"水鸭",，
"蓟",，
“西红柿”，
“绿松石”，
“紫罗兰”，
"海军",，
“老花边”，
"橄榄",，
“奥利弗·德拉布”，
“橙色”，
“橙色的”，
“兰花”，
"一枝黄花",，
"淡绿色",，
"蓝绿色",，
];
变量字体=[
“Arial”，
“Helvetica”，
“Arial黑色”，
“漫画无MS”，
“影响”，
“木炭”，
“Lucida Sans Unicode”，
“露西达·格兰德”，
“塔荷马”，
“日内瓦”，
“投石机MS”，
“Verdana”，
“Courrier New”，
“露西达控制台”
];
var$area=$（'article'），
minSize=21，
最大尺寸=36；
对于（变量i=0；ispan'）；
$mots.每个（功能（j，el）{
变量$el=$（el）；
var previousTop=$el.position（）.top；
var previousLeft=$el.position（）.left；
var previousBottom=previousTop+$el.height（）；
var previousRight=previousLeft+$el.width（）；
while（true）{
var newPositionTop=random（$area.position（）.top，topMaxPosition）；
var newPositionLeft=random（$area.position（）.left，leftMaxPosition）；
var newPositionBottom=newPositionTop+$mot.height（）；
var newPositionRight=newPositionLeft+$mot.width（）；
如果（！newPositionTop.between）（previousTop，previousBottom）&&
！newPositionBottom.between（previousTop，previousBottom）&&
！newPositionLeft.between（previousLeft，previousRight）&&
！newPositionRight.between（previousLeft，previousRight）
) {
$mot.css({
“顶部”：新位置顶部，
“left”：newPositionLeft
});
打破
}
}
});
}
});
文章{
宽度：750px；
高度：750px；
边框：1px纯红；
}
文章跨度{
位置：绝对位置；
}
如果在云标记中使用position:relative，则在流中和流体盒中可能更容易管理
更像是个人的意见，而不是建议和对js的可怕而快速的修复

jQuery（函数（$）{
var随机=函数（最小值、最大值）{
返回Math.round（Math.random（）*（max-min）+min，0）；
}
Number.prototype.between=函数（a，b）{
var min=Math.min.apply（数学[a，b]），
max=Math.max.apply（数学[a，b]）；
返回此>最小值和此<最大值（&T）；
};
var Motshorizontax=[
“大奖赛”，
“传输”，
"财政",，
"管理",，
"过程",，
"评估",，
"表演",，
“dirigant”，
“普雷维森奈尔”，
"期待",，
"适应",，
"suivi",，
“CONTROôle”，
"手推车",，
“clignotant”，
"预算",，
"协助",，
“地位”，
"社会",，
“优化”，
“projet”，
“瓦勒尔”，
“财政”
];
变量颜色=[
“MediumPurple”，
“中绿色”，
“中蓝”，
“中绿色”，
“中绿松石”，
“春绿”，
“钢铁蓝”，
"谭",，
"水鸭",，
"蓟",，
“西红柿”，
“绿松石”，
“紫罗兰”，
"海军",，
“老花边”，
"橄榄",，
“奥利弗·德拉布”，
“橙色”，
“橙色的”，
“兰花”，
"一枝黄花",，
"淡绿色",，
"蓝绿色",，
];
变量字体=[
“Arial”，
“Helvetica”，
“Arial黑色”，
“漫画无MS”，
“影响”，
“木炭”，
“Lucida Sans Unicode”，
“露西达·格兰德”，
“塔荷马”，
“日内瓦”，
“投石机MS”，
“Verdana”，
“Courrier New”，
“露西达控制台”
];
var$area=$（'article'），
minSize=21，
最大尺寸=36；
对于（变量i=0；ivar random = function(min, max) {
    return Math.round(Math.random() * (max - min) + min, 0);
}
Number.prototype.between = function(a, b) {
    var min = Math.min.apply(Math, [a, b]),
        max = Math.max.apply(Math, [a, b])
    ;
    return this > min && this < max;
};

jQuery(function($) {

    var $area = $('article')
        , minSize = 21
        , maxSize = 48
    ; 
    for(var i = 0; i < colors.length; i++) {

        var $mot = $('<span/>').text(motsHorizontaux[i]).css({
            'color': colors[i],
            'font-family': fonts[i],
            'font-size': random(minSize, maxSize)
        });
        $mot.appendTo('article');

        var topMaxPosition = $area.height() - $mot.height();
        var leftMaxPosition = $area.width() - $mot.width();

        $mot.css({
            'top': random($area.position().top, topMaxPosition),
            'left': random($area.position().left, leftMaxPosition)
        }); 

        // ...
    }    

});

$mots = $area.find('> span');
$mots.each(function(j, el) {
    var $el = $(el);
    var previousTop = $el.position().top;
    var previousLeft = $el.position().left;
    var previousBottom = previousTop + $el.height();
    var previousRight = previousLeft + $el.width();

    while(true) {
        var newPositionTop = random($area.position().top, topMaxPosition);
        var newPositionLeft = random($area.position().left, leftMaxPosition);
        var newPositionBottom = newPositionTop + $mot.height();
        var newPositionRight = newPositionLeft + $mot.width();
        if(
            !newPositionTop.between(previousTop, previousBottom) &&
            !newPositionBottom.between(previousTop, previousBottom) &&
            !newPositionLeft.between(previousLeft, previousRight) &&
            !newPositionRight.between(previousLeft, previousRight)
        ) {
            $mot.css({
                'top': newPositionTop,
                'left': newPositionLeft
            });
            break;

        }
    }
});

function intersectRect(rect1, rect2) { 
    return !(rect2.left > rect1.right || 
        rect2.right < rect1.left || 
        rect2.top > rect1.bottom || 
        rect2.bottom < rect1.top); 
}