雲標簽在固定寬度div中排序和定位

Question

我有一個固定寬度的div ，它包含像stackoverflow-tags這樣的'tags'。

現在，令我不安的是， Hallo標簽位於最后一行，但它適合第一行。 像這樣：

元素的順序無關緊要。 因此，重新排序將是一種選擇。

問題：我怎樣才能做到這一點？ 我目前正在使用<ul><li></li></ul>構造。

最好的方式是CSS-Way，但我想由JS來解決這個問題。 任何想法，將不勝感激 ：）

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

Answer 1

知道了：jsFiddle就在這里

$(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);
}

Answer 2

假設標簽的容器是一個設置寬度，而標簽本身不是（即：它們從它們的內容繼承它們的寬度，而不是我們能夠給它們設置一個寬度），那么它的數量不是很大你可以從CSS的角度做，而不會破壞和重新排序標記的流程。

如果標記是在服務器端生成的，我確定你可以在將標記推入視圖之前計算寬度並重新排序。 如果沒有，你就會因為沒有使用JavaScript而陷入困境。

鑒於訂單要求似乎純粹基於外觀（即：不起作用），增強使用JavaScript在屏幕截圖中顯示的標准浮點視圖沒有任何害處。 這意味着啟用JS的訪問者將獲得“增強”視圖（其中元素排序很好），而非JS用戶仍然會擁有功能完備的標簽雲，盡管這種方式稍微有些不太有條理。

jQuery Masonry或Isotope可能會做你所需要的。

Answer 3

這是擱置的解決方案。 和砌體有點作弊（請注意columnWidth：1）。

   $('.as-selections').masonry({
      itemSelector: '.as-selection-item'
      , columnWidth: 1 });

http://jsfiddle.net/D5ud7/1/

我想你可以為這個或更好的html表單找到更合適的庫，以便砌築。