Question

我为圆形标签创建了4种预定义尺寸。我想创建一个公园标签（云标签），其中标签是第一次随机分散。但我不能让它发挥作用这是我的代码：

HTML

<div id="tags-cloud">
    <div class="tag-1 tag">tag name</div>
    <div class="tag-2 tag">tag name</div>
    <div class="tag-3 tag">tag name</div>
    <div class="tag-4 tag">tag name</div>
</div>

CSS

tags-cloud {
 background-color:white;
 padding:10px;
 margin-top:10px;
 position:relative;
 width:100%;
 height:600px;
}

.tag {
 color:#FFFFFF;
 text-align:center;
 text-transform:capitalize;
 border-radius:100%;
 display:inline-block;
 position:absolute;
}

.tag-1{width:46px;height:46px;background:#DC5E0A;line-height:46px;}
.tag-2{width:58px;height:58px;background:#05F9EB;line-height:58px;}
.tag-3{width:76px;height:76px;background:#4B05F9;line-height:76px;}
.tag-4{width:89px;height:89px;background:#9EDC0A;line-height:89px;}

JS CODE

$('.tag').each(function() {
        var size = Math.round(Math.random()*550+20);
        $(this).css({
            'top':size/2,
            'bottom':size/2,
            'left':size/2,
            'right':size/2,
            zIndex:size
        })
    });

我想要的结果：

enter image description here

我的结果

enter image description here

JS FIDDLE

http://jsfiddle.net/s1aoxf1o/

Answer 1

正如已经指出的那样，您需要不同的顶部和左侧坐标。否则，所有圆圈都将沿着对角线放置。

然后，您需要一种方法来确定两个圆圈是否正在接触（或者在给定的＃34;彼此的边距内）。您可以通过确定圆的中心（原点）并应用距离公式来完成此操作：

enter image description here

如果距离大于半径加上边距的总和，那么圆圈就可以了。

以下是代码：

function touching(margin) {
  var result= false;
  $('.tag').each(function() {
    var t1= $(this),
        t1radius= t1.width()/2,
        t1x= t1.offset().left + t1radius,
        t1y= t1.offset().top  + t1radius;

    $('.tag').not(t1).each(function() {
      var t2= $(this);
          t2radius= t2.width()/2,
          t2x= t2.offset().left + t2radius,
          t2y= t2.offset().top  + t2radius,
          dist= Math.sqrt((t2x-t1x)*(t2x-t1x) + (t2y-t1y)*(t2y-t1y));

      if(t1radius && t2radius && dist<t1radius+t2radius+margin) {
        result= true;
      }
    })
  });
  return result;
} //touching

在以下代码中，圆圈随机放置在其容器中，直到它们不会触及＆＃34;相差20px。背景颜色是随机分配的。字体大小是圆圈大小的函数：

$('.tag').each(function(idx) {
  do {
    var container= $(this).parent(),
        diam= Math.round(Math.random() * 75 + 50),
        top = Math.round(Math.random() * (container.height() - diam)),
        left= Math.round(Math.random() * (container.width()  - diam)),
        bg= '#'+(Math.random()*128+32<<0).toString(16)+(Math.random()*128+32<<0).toString(16)+(Math.random()*128+32<<0).toString(16);

    $(this)
      .css({
        top         : top,
        left        : left,
        width       : diam,
        font        : diam/5+'px verdana',
        lineHeight  : diam+'px',
        background  : bg
      })
      .html('tag '+(idx+1));
  } while(touching(20));
});

Fiddle

Answer 2

您需要为left和top添加随机变量。在绝对定位元素上，您只需要左侧或右侧以及顶部或底部。

$(function() {
  $('.tag').each(function() {
    var size = Math.round(Math.random() * 550 + 20);
    var left = Math.round(Math.random() * 550 + 20);
    var top = Math.round(Math.random() * 550 + 20);
    $(this).css({
      'top': top / 2,
      'left': left / 2,
      zIndex: size
    })
  });
});

$(function() {
  $('.tag').each(function() {
    var size = Math.round(Math.random() * 550 + 20);
    var left = Math.round(Math.random() * 550 + 20);
    var top = Math.round(Math.random() * 550 + 20);
    $(this).css({
      'top': top / 2,
      'left': left / 2,
      zIndex: size
    })
  });
})

tags-cloud {
  background-color: white;
  padding: 10px;
  margin-top: 10px;
  position: relative;
  width: 100%;
  height: 600px;
}
.tag {
  color: #FFFFFF;
  text-align: center;
  text-transform: capitalize;
  border-radius: 100%;
  display: inline-block;
  position: absolute;
}
.tag-1 {
  width: 46px;
  height: 46px;
  background: #DC5E0A;
  line-height: 46px;
}
.tag-2 {
  width: 58px;
  height: 58px;
  background: #05F9EB;
  line-height: 58px;
}
.tag-3 {
  width: 76px;
  height: 76px;
  background: #4B05F9;
  line-height: 76px;
}
.tag-4 {
  width: 89px;
  height: 89px;
  background: #9EDC0A;
  line-height: 89px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tags-cloud">
  <div class="tag-1 tag">tag name</div>
  <div class="tag-2 tag">tag name</div>
  <div class="tag-3 tag">tag name</div>
  <div class="tag-4 tag">tag name</div>
</div>

Answer 3

我找到了一个有效的解决方案。对我来说，我希望标签分散剂只是第一次，而不是每次重新加载时的不同数字。但是我的解决方案不是随意的标签位置，而是在该区域内使圆圈分散。

HTML CODE

<div id="tags-cloud">
    <div class="tag-1 tag">tag name</div>
    <div class="tag-2 tag">tag name</div>
    <div class="tag-3 tag">tag name</div>
    <div class="tag-4 tag">tag name</div>
</div>

CSS代码

tags-cloud {
 background-color:white;
 padding:10px;
 margin-top:10px;
 position:relative;
 width:100%;
 height:600px;
}

.tag {
 color:#FFFFFF;
 text-align:center;
 text-transform:capitalize;
 border-radius:100%;
 display:inline-block;
}

.tag-1{width:46px;height:46px;background:#DC5E0A;line-height:46px;}
.tag-2{width:58px;height:58px;background:#05F9EB;line-height:58px;}
.tag-3{width:76px;height:76px;background:#4B05F9;line-height:76px;}
.tag-4{width:89px;height:89px;background:#9EDC0A;line-height:89px;}

为了使它工作我使用Masonry

JS CODE

var $container = $('#tags-cloud');
    $container.masonry({
      columnWidth: 50,
      itemSelector: '.tag'
    });

JS FIDDLE

http://jsfiddle.net/anp6uro8/1/

嗯，这只是@ kay解决方案和@Rick Hitchcock解决方案等许多其他解决方案之间的解决方案。

用css和Javascript创建一个park标签

3 个答案: