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

Question

我有一个固定宽度的 div，其中包含像 stackoverflow-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

这是现成的解决方案。还有一点 Masonry 的作弊（注意 columnWidth: 1）。

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

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

我想你可以找到更合适的库来解决这个问题，或者找到更好的 html 表单来处理砖石。