javascript - 云标签在固定宽度的div中排序和定位

Question

我有一个 div 具有固定宽度，其中包含像 stackoverflow 标签这样的“标签”。

现在，令我不安的是 Hallo标签在最后一行，但它适合放在第一行。像这样:

元素的顺序无关紧要。因此，重新排序是一种选择。

问题:我怎样才能做到这一点？我目前正在使用 <ul><li></li></ul>构造。

最好的方法是 CSS-Way，但我想这取决于 JS 来解决这个问题。任何想法将不胜感激:)

更新JSFiddle:http://jsfiddle.net/CLj2q/

Answer 1

知道了:jsFiddle 是 here

$(function() {
    $('.as-close').click(function(e) { $(this).parent().remove(); });
    DoTagSort();
});

function DoTagSort() {

    var TheItems = [], TheHTML = '';
    var TheLinks = $('.as-selections').find('li').each(function () {
        TheItems.push($(this).text().slice(1));        
    });

    TheItems.sort(function(a, b) { return b.length - a.length; });

    var TheTag = '<li class="as-selection-item"><a class="as-close">×</a>';

    while(TheItems.length > 1) {

        TheHTML = TheHTML + TheTag + TheItems[0] + '</li>';
        TheHTML = TheHTML + TheTag + TheItems[TheItems.length - 1] + '</li>';

        TheItems.splice(0, 1);
        TheItems.splice(TheItems.length - 1, 1);
    }

    if (TheItems.length) {
        TheHTML = TheHTML + TheTag + TheItems[0] + '</li>';
    }

    $('.as-selections').html(TheHTML);
}