Tagsort.is a jQuery plugin for showing tags.
A Simple of tagsort Example as shown below −
<!DOCTYPE html><html lang ="en"><head><meta charset ="UTF-8"><title>Tagsort Demo</title><!-- Demo Styles --><style>
html,body {
margin:0;
padding:0;}
body {
background-color: #FFF;
font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue", Helvetica, Arial,"Lucida Grande", sans-serif;
font-weight:300;}.container {
width:80%;
margin:0 auto;}
h1 > small a {
color: #AAA;
text-decoration: none;
font-size:70%;
margin-left:10px;}
h1 > small a:hover {
color: #000;}.item {
box-sizing: border-box;
float: left;
position: relative;
min-height:1px;
padding-left:15px;
padding-right:15px;
width:20%;
margin-bottom:40px;
height:360px;
max-height:360px;
overflow: hidden;}.item .wrapper {
background-color: #f4f4f4;
padding:8px;
height:100%;}.item .wrapper img {
width:100%;}.item .wrapper .item-tags {
color: #AAA;
font-size:12px;
line-height:1.8;}.tagsort-tags-container {
margin:40px 0;}</style><link href ="styles/tagsort.min.css" rel ="stylesheet" type ="text/css"></link><script src ="scripts/jquery-2.1.3.min.js"
type ="text/javascript" charset ="utf-8"></script><script src ="scripts/tagsort.min.js"
type ="text/javascript" charset ="utf-8"></script><script>$(function(){$('div.tags-container').tagSort({selector:'.item', tagWrapper:'span',
displaySelector:'.item-tags', displaySeperator:' / ', inclusive:false, fadeTime:200});});</script></head><body><div class="container"><div class="tags-container row"></div><div class="item col-md-3" data-item-id ="1"
data-item-tags ="PHP,JavaScript,React,Memcached,RocksDB,Cassandra,Flux"><div class="wrapper"><img src ="images/facebook.jpg" alt ="Facebook"><h2>Facebook</h2><p class="item-tags"></p></div></div><div class="item col-md-3" data-item-id ="2"
data-item-tags ="MySQL,JavaScript,jQuery,Memcached,Scala,Rails,Hadoop,Redis"><div class="wrapper"><img src ="images/twitter.jpg" alt ="Twitter"><h2>Twitter</h2><p class="item-tags"></p></div></div><div class="item col-md-3" data-item-id ="3"
data-item-tags ="MySQL,Node.js,Python,JavaScript,React,Java,Cassandra"><div class="wrapper"><img src ="images/netflix.jpg" alt ="Netflix"><h2>Netflix</h2><p class="item-tags"></p></div></div><div class="item col-md-3" data-item-id ="4"
data-item-tags ="MySQL,Node.js,Python,Java,Objective-C,PostgreSQL,Redis,MongoDB"><div class="wrapper"><img src ="images/uber.jpg" alt ="Uber"><h2>Uber</h2><p class="item-tags"></p></div></div><div class="item col-md-3" data-item-id ="5"
data-item-tags ="MySQL,Python,Memcached,nginx"><div class="wrapper"><img src ="images/dropbox.jpg" alt ="Dropbox"><h2>Dropbox</h2><p class="item-tags"></p></div></div><div class="item col-md-3" data-item-id ="6"
data-item-tags ="Python,Java,Cassandra,Hadoop,PostgreSQL,Hadoop"><div class="wrapper"><img src ="images/spotify.jpg" alt ="Spotify"><h2>Spotify</h2><p class="item-tags"></p></div></div><div class=" item col-md-3" data-item-id ="7"
data-item-tags ="MySQL,Javascript,jQuery,Ruby,Redis,nginx,Rails,SASS"><div class="wrapper"><img src ="images/kickstarter.jpg" alt ="Kickstarter"><h2>Kickstarter</h2><p class="item-tags"></p></div></div><div class="item col-md-3" data-item-id ="8"
data-item-tags ="Go,Ruby,MySQL,Redis,Memcached,SASS,Rails,nginx"><div class="wrapper"><img src ="images/digitalocean.jpg" alt ="DigitalOcean"><h2>DigitalOcean</h2><p class="item-tags"></p></div></div><div class="item col-md-3" data-item-id ="9"
data-item-tags ="Ruby,MySQL,Hadoop,nginx,PHP,Scala,Memcached,Redis"><div class="wrapper"><img src ="images/tumblr.jpg" alt ="Tumblr"><h2>Tumblr</h2><p class="item-tags"></p></div></div><div class="item col-md-3" data-item-id ="10"
data-item-tags ="nginx,MySQL,Redis,Rails,Ruby,Hadoop"><div class="wrapper"><img src ="images/shopify.jpg" alt ="Shopify"><h2>Shopify</h2><p class="item-tags"></p></div></div><div class="item col-md-3" data-item-id ="11"
data-item-tags ="JavaScript,jQuery,Redis,Java,Go,Cassandra,.NET"><div class="wrapper"><img src ="images/stackexchange.jpg" alt ="Stack Exchange"><h2>Stack Exchange</h2><p class="item-tags"></p></div></div><div class="item col-md-3" data-item-id ="12"
data-item-tags ="nginx,Redis,MongoDB,Python,Java,React,JavaScript,Scala,Cassandra"><div class="wrapper"><img src ="images/keenio.jpg" alt ="Keen IO"><h2>Keen IO</h2><p class="item-tags"></p></div></div></div></body></html></pre>
