jquery - 如何使用css在无序列表中格式化随机子级

Closed. This question needs to be more focused。它当前不接受答案。












                            想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。

                        3年前关闭。




  如图所示，如何使用CSS或JS格式化无序列表中的随机项目

最佳答案

看这个：https://jsfiddle.net/er0j1fv4/

<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.4/jqcloud.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.4/jqcloud-1.0.4.min.js"></script>
</head>

<body>

    <div id="div1" style="width: 600px; height: 400px;"></div>


    <script>

  $(document).ready(function(){

      var wordList = [
          {text: "Peter", weight: 15},
          {text: "Martin", weight: 9, link: "http://www.google.com/"},
          {text: "Manhattan", weight: 6, html: {title: "This is the manhattan city"}},
          {text: "Amalie", weight: 7},
          {text: "Himalayas", weight: 5},
          {text: "Peter", weight: 15},
          {text: "Martin", weight: 9, link: "http://www.google.com/"},
          {text: "Manhattan", weight: 6, html: {title: "This is the manhattan city"}},
          {text: "Amalie", weight: 7},
          {text: "Himalayas", weight: 5},
          {text: "Peter", weight: 15},
          {text: "Martin", weight: 9, link: "http://www.google.com/"},
          {text: "Manhattan", weight: 6, html: {title: "This is the manhattan city"}},
          {text: "Amalie", weight: 7},
          {text: "Himalayas", weight: 5},
      ];

        $("#div1").jQCloud(wordList);

  });

    </script>

</body>

</html>

结果：

参考：

https://github.com/lucaong/jQCloud