动态词云

如果是静态的词云推荐使用echarts的词云，可以自定义词云形状什么的，很方便，不需要重复造轮子了。
我没有找到为其添加动态样式的相关文档，需求需要，这里重新总结一下

代码

环境react

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import styleProps from '../ChartSetting/styleProps';

const ColorList = ['#21bfd7', '#461ba9', '#d838ab', '#2c84f0', '#21d78f', '#cf6172'];

let timer = null;

class TagesCharts extends PureComponent {
    constructor(props) {
        super(props)
        this.renderKeyWord = this.renderKeyWord.bind(this);
        this.initialize = this.initialize.bind(this);
        this.starmove = this.starmove.bind(this);
        this.setTimeout = this.setTimeout.bind(this);
    }

    componentDidUpdate() {
        let children = this.Chart.childNodes;
        for (let i = 0; i < children.length; i++) {
            children[i].pause = 1;
            children[i].time = null;
            this.initialize(children[i]);
        }
        this.setTimeout(children);
    }

    setTimeout(children) {
        timer = setTimeout(() => {
            clearTimeout(timer)
            this.starmove(children)
            this.setTimeout(children)
        }, 50)
    }

    starmove(children) {
        for (let i = 0; i < children.length; i++) {
            if (children[i].offsetTop <= -children[i].offsetHeight) {
                children[i].style.top = `${this.Chart.offsetHeight}px`;
                this.initialize(children[i]);
            } else {
                children[i].style.top = `${children[i].offsetTop - children[i].getAttribute('ispeed')}px`;

            }
        }
    }

    componentWillUnmount() {
        clearTimeout(timer)
    }

    initialize(item) {
        let iLeft = parseInt(Math.random() * this.Chart.offsetWidth);
        let keyWeight = item.getAttribute('value');
        let iTimer = parseInt(keyWeight * 1500);
        item.pause = 0;
        if ((iLeft - item.offsetWidth) > 0) {
            item.style.left = `${iLeft - item.offsetWidth}px`;
        } else {
            item.style.left = `${iLeft}px`;
        }
        clearTimeout(item.time);
        item.time = setTimeout(() => {
            item.pause = 1;
        }, iTimer);
    }

    renderKeyWord() {
        let { data } = this.props;
        let len = ColorList.length;
        if (Object.keys(data).length) {
            let arr = [];
            let index = 0;
            for (let key in data) {
                arr.push({
                    name: key,
                    value: Math.sqrt(data[key]),
                    color: ColorList[index]
                })
                index = (index + 1) % len === 0 ? 0 : index + 1;
            }
            return arr.map((item) => {
                let fontSize = `${Math.sqrt(styleProps.bodyFontSize) * Math.sqrt(item.value)}px`;

                return <span
                    key={item.name}
                    value={item.value}
                    ispeed={Math.ceil(1 / item.value * 40) + 1}
                    style={{ fontSize: fontSize,color: item.color}}>
                    {item.name}
                </span>
            })
        } else {
            return []
        }
    }

    render() {
        let { className } = this.props;
        let keyWord = this.renderKeyWord();
        return (
            <div
                className={`keywords ${className}`}
                ref={(node) => { this.Chart = node }}>
                {keyWord}
            </div>
        )
    }
}

TagesCharts.propTypes = {
    data: PropTypes.object, // 词云的数据
    className: PropTypes.string
};

export default TagesCharts

效果：

demo.gif

补充

在这个需求中要求就是向上浮动，但是如果小伙伴们想要球形浮动的，也可以参考下面链接中除了第一个。
如果小伙伴们有更好的想法记得留言呀！！！

参考

https://m.ruzw.com/html/201805/330.html
http://www.cnblogs.com/axes/p/3501424.html
http://www.matao.me/test/tag-cloud.html
https://blog.csdn.net/huozi07/article/details/48177079?locationNum=6&fps=1