如何使用css格式化无序列表中的随机子节点

时间：2016-12-09 06:04:21

标签： jquery css

  

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

1 个答案:

答案 0 :(得分：1)

看看这个：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>

结果：

enter image description here

<强>参考：

  

https://github.com/lucaong/jQCloud

相关问题
最新问题