标签云设计与探索

\blog\home\views.py 

django随机获取20个标签,去除重复的不一定20个了,然后js遍历利用随机颜色,随机字体大小,随机位置,随机上下动画

        """↓↓↓标签云↓↓↓"""
        # 获取标签20个随机
        tags = Article.objects.values_list('tags').order_by('?').distinct()[:20]
        # print(set(list(tags)))
        tag_list = []
        for tag in set(list(tags)):
            tag_list.append(tag[0])
        # print(tag_list)
        """↑↑↑标签云↑↑↑"""

 context = {
           
            "tags": tag_list
        }

<!-- 标签云 -->
                        <div id="bqyun" class="mt-3 bg-white pt-2 pl-3  card " style="position: relative;margin-top: 1px;border:1px solid; padding:2em; overflow: hidden; height: 400px">
                            <h4><strong>标签云</strong></h4>
                                    <hr>
                            {% for tag in tags %}
                            <a  class = "tags_sky" id="tag_{{ forloop.counter0 }}"  style="position: absolute;" >{{ tag }}</a>

                            {% endfor %}
                        </div>

<script>
    var tag = document.getElementsByClassName("tags_sky");
    for(var i = 0; i<tag.length; i++)
    {
        var tag_ids = $("#tag_" + i);
        tag_ids.css({
             "font-size": 20 + Math.ceil(Math.random()*300)+"%",
            'color': 'rgb('+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+')',
            "top":50+Math.ceil(Math.random()*300)+'px',
            "right":Math.ceil(Math.random()*250)+"px"
        });
        {#随机上下移动#}
        tag_ids.animate({"top": 50+Math.ceil(Math.random()*300), "right": Math.ceil(Math.random()*250)}, 10000);

    }

</script>