Сортировка и позиционирование облачных меток в div с фиксированной шириной

У меня есть div с фиксированной шириной, который содержит теги, такие как теги stackoverflow.

Tag Container - unwanted

Теперь меня беспокоит, что тег Hallo находится в последней строке, но он будет вписываться в первую строку. Вот так:

Tag Container - wanted

Порядок элементов не имеет значения. Таким образом, переупорядочение будет вариантом.

Вопрос: Как я могу это достичь? В настоящее время я использую конструкцию <ul><li></li></ul>.

Самый лучший способ - это CSS-путь, но я догадываюсь, что это касается JS, чтобы решить эту проблему. Любые идеи будут оценены:)

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

Ответы

Ответ 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);
}

enter image description here

Ответ 2

Предполагая, что контейнер для тегов представляет собой ширину набора, а сами теги не являются (то есть: они наследуют их ширину от их содержимого, вместо того, чтобы мы могли дать им заданную ширину), нет огромное количество, которое вы можете сделать с точки зрения CSS, не нарушая и не переупорядочивая поток разметки.

Если разметка создается на стороне сервера, я уверен, что вы могли бы рассчитать ширину и изменить порядок до нажатия на разметку в виде. Если нет, вы немного застряли без использования JavaScript.

Учитывая, что требование порядка кажется чисто внешним (т.е. не функциональным), нет никакого вреда в улучшении стандартного представления с плавающей точкой, которое вы отображали на скриншоте с помощью JavaScript. Это означает, что посетители с поддержкой JS получат "расширенный" вид (с упорядоченными элементами), в то время как пользователи, не являющиеся JS, будут обладать полностью функциональным облаком тегов, хотя и немного менее организованным.

jQuery Masonry или Isotope, вероятно, сделает будет делать именно то, что вам нужно.

Ответ 3

Это не работает. И немного обмана с масонством (обратите внимание на columnWidth: 1).

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

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

Я думаю, вы могли бы найти более подходящую библиотеку для этой или лучшей html-формы для кладки, чтобы хруст.