Chmura tagów sortowania i pozycjonowania w div o stałej szerokości

Question

Mam div o stałej szerokości, która zawiera "znaczniki", takie jak stackoverflow-tags.

Teraz, co do mnie niepokojące jest to, że Hallo Tag znajduje się w ostatnim wierszu, ale byłoby zmieścić się w pierwszej linii. Tak:

Kolejność elementów jest nieistotna. Tak więc zmiana kolejności byłaby opcją.

Pytanie: Jak mogę to osiągnąć? Obecnie używam konstruktu <ul><li></li></ul>.

Najprzyjemniejszym sposobem byłby CSS-Way, ale myślę, że to JS musi rozwiązać ten problem. Wszelkie pomysły będą mile widziane :)

UPDATE JSFiddle: http://jsfiddle.net/CLj2q/

Answer 1

Got it: The jsFiddle jest 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); 
} 

Answer 2

Zakładając, że pojemnik na znacznikach jest zbiorem szerokości, a same znaczniki nie są (tj one dziedziczyć ich szerokość z ich treści, a nie z możliwości nadania im ustawionej szerokości), nie ma ogromnej ilości, którą można zrobić z perspektywy CSS bez łamania i ponownego zamawiania przepływu znaczników.

Jeśli znacznik jest generowany po stronie serwera, jestem pewien, że można obliczyć szerokość i zmienić kolejność przed przeniesieniem znaczników do widoku. Jeśli nie, jesteś trochę utknął bez JavaScript.

Biorąc pod uwagę, że wymóg zamówienia wydaje się być oparty wyłącznie na wyglądzie (tzn. Nie działa), nie ma nic złego w ulepszaniu standardowego widoku float, który został wyświetlony na zrzucie ekranu przy użyciu JavaScript. Oznacza to, że użytkownicy korzystający z JS otrzymają "ulepszony" widok (z ładnie zamówionymi elementami), podczas gdy użytkownicy spoza JS nadal będą mieli w pełni funkcjonalną chmurę znaczników, choć w nieco mniej zorganizowany sposób.

jQuery Masonry lub Isotope prawdopodobnie zrobiłby dokładnie to, czego potrzebujesz.

Answer 3

To jest wyłączone z rozwiązania półkowego. I trochę oszukiwania z Masonerią (zauważ kolumnę Width: 1).

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

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

Chyba można znaleźć bardziej odpowiednie dla tej biblioteki lub lepszej formie html dla murowane aby schrupać.