云标签插件,布局随机生成并且自适应
JavaScript HTML CSS
Latest commit ba18601 May 6, 2015 @dodoroy update
Permalink
Failed to load latest commit information.
demo
README.md
wordbox.css
wordbox.js

README.md

About

jquery.wordbox.js makes it easy to create category tags and classify labels.

Demo

Demo

screen screen

Usage

1.Include jQuery and jquery.wordbox.js

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.wordbox.js"></script>

2.Create a HTML tag to hold the wordbox

<div id="wordbox"></div>

3.Call wordbox()

$("#wordbox").wordbox({
    /*options*/
});

Options

To customize jquery.wordbox.js, simply pass in an options object:

    var titles = ['JavaScript', 'CSS', 'HTML', 'HTML5', 'SVG', 'PHP', 'Python', 'Shell', 'WebGL'];
    var words = [];
    for(var i = 0; i < titles.length; i++) {
        words[i] = {
            "title" : titles[i],
            "url" : ""
        }
    }
    var colors = ['#cc5b34', '#c27c4d'];
    $("#wordbox").wordbox({
        isLead: false,          
        leadWord: null,
        words: words,
        colors: colors,
        isFixedWidth: true,
        width: 800,
        height: 200
    });

Credit

Created by @dodo糯, blog

Feel free to use, share and fork.

Enjoy!

And

上面的笨蛋布局逻辑实在写的太烂了,重新写了下,从很烂优化到了有点烂的程度.

by 张玺 zhangxi.me