javascript - CSS:我怎样才能有一个 "scatter display of words"而不是 html 默认显示向上/向下？

Question

我有一个页面显示从用户输入中检索到的不同单词。提交次数越多的词，字体越大。

我有这样的东西(想象一下不同的字体大小):

 love 

 war

 food  

 sport

 ...

每个单词都在 div 内的 p 标签中，这是我的代码:

<div class="posts_index">
    {{#each posts}}
        <p>{{word}}</p>
    {{/each}}
</div>

我怎样才能让单词随机显示，分散在页面上，而不是仅仅按照 HTML 从上到下的顺序？

我想要的是这样的:

 love 

                    war

      food  

              sport

  ...

Answer 1

您需要将元素绝对定位在随机位置:

$(function () {
  $(".posts_index p").each(function (i, elt) {
    $(elt).css({
      left: Math.random() * 150,
      top: Math.random() * 150
    });
  });
});

.posts_index {
  height: 180px;
}

.posts_index p {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="posts_index">
    <p>love</p>
    <p>war</p>
    <p>food</p>
    <p>sport</p>
</div>