Tagsort.is плагин JQuery для отображения тегов.
Простой пример тега сортировки, как показано ниже —
<!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>
Это должно привести к следующему результату —