Javascript 固定宽度div中的云标记排序和定位

我有一个固定宽度的div，它包含像stackoverflow标签一样的“标签”

现在，让我不安的是，

Hallo

标记在最后一行，但它可以放在第一行。像这样：

元素的顺序是不相关的。因此，重新排序将是一种选择

问题：我怎样才能做到这一点？我目前正在使用一个

构造

最好的方法是CSS方法，但我想这取决于JS来解决这个问题。
如有任何想法，将不胜感激：）

更新
jsiddle:
假设标签的容器是一个设置的宽度，而标签本身不是（即：它们从内容中继承宽度，而不是我们能够给它们一个设置的宽度），那么从CSS的角度看，如果不中断和重新排列标记流，您可以做的事情不多

如果标记是在服务器端生成的，我相信您可以在将标记推入视图之前计算宽度并重新排序。如果没有，那么如果不使用JavaScript，您就会有点卡住

考虑到订单要求似乎完全基于外观（即：不起作用），使用JavaScript增强屏幕截图中显示的标准浮点视图没有什么坏处。这意味着启用JS的访问者将获得一个“增强”视图（元素有序排列），而非JS用户仍将拥有一个功能齐全的标签云，尽管其组织方式稍逊

或者可能会做您需要的事情。
这是现成的解决方案。还有一点关于砖石的欺骗（注意柱宽：1）


我想您可以找到更适合这种或更好的html表单的库，以便进行处理。
明白了：JSFIDLE是

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

$（函数（）{
$（'.as close'）。单击（函数（e）{$（this.parent（）.remove（）；}）；
DoTagSort（）；
});
函数DoTagSort（）{
var-ItItems=[]，TheHTML=''；
var TheLinks=$（'.as selections'）。find（'li'）。each（函数（）{
push（$（this.text（）.slice（1））；
});
sort（函数（a，b）{返回b.length-a.length；}）；
var TheTag='
×'；
而（长度>1）{
HTML=HTML+Tag+ItItems[0]+'
'；
HTML=TheHTML+TheTag+ItItems[ItItems.length-1]+''；
接头（0,1）；
接头（接头长度-1,1）；
}
if（长度）{
HTML=HTML+Tag+ItItems[0]+''；
}
$（'.as selections'）.html（TheHTML）；
}

如果html是在服务器端创建的，那么最好也在服务器端订购标签。否则，数据从哪里来？你能提供一些你的代码吗？CSS无法自动重新排列文档，因此您需要为此编写Javascript。但由于很多原因，这项工作很糟糕。我将把jQuery标记添加到你的帖子中，因为它变得相关了，这是从小提琴的角度来判断的。@steve：作为一个更新，我添加了一些代码来动态添加标记，只是为了好玩：我不确定Massy是否能解决这个问题-我想它只适用于类似网格的布局。OP想要的是一种填充算法，它可以确定所有线路上的空闲空间，并从其他地方插入拟合元素。尼尔斯，我不确定我是否同意你的观点，但我的答案中添加了同位素作为替代。砌石和同位素的工作方式与您描述的完全相同：一种算法，它获取正确宽度的元素以放置在父对象的空白空间中。我要强调的是，砖石结构和同位素结构都是网格布局中最常用的结构（包括高度和宽度的计算，这在本例中是不需要的），但它们的行为正是本例所要求的。没有什么不同意的——我只是说“我不确定”基于对链接页面的扫描：）这可能就像用大炮射击橡皮船一样，对于基于流的重组，可能有更小的插件（我不知道），或者实现起来并不复杂。这不仅仅是因为我也有答案，而是一个疯狂的解决方案！问题是，即使不需要，它也会重新排列项目，并且只对2列列表有效。@Bizniztime:这正是OP要求的：固定宽度，他不介意更改顺序。你说得对，如果标签只有1或2个字符宽，那么它看起来会很奇怪，但标签通常不是这样的。@frencie Yes fixed width。但宽度是多少？一行最多只能容纳2个列表元素吗？@Bizniztime:我想你想得太多了：这是关于显示标签的。是的，我知道它每行放置2个标签，我认为这非常适合这个用例。但你是对的，如果标签都是1或2个字符长，看起来会很奇怪（顺便说一句，我的解决方案将最长和最短的标签配对）；如果标签宽度为86个字符，则相同；如果盒子更宽，也一样。但这段代码将适用于这个特定上下文中的实际标记。除此之外，我确信还有像同位素这样的插件也能完成这项工作，但与我所拥有的20行左右的代码相比，这些插件是巨大的。我只是在想。而且你是最棒的。如果有一天，由于某种奇怪的原因，OP试图将其“固定”宽度更改为多几个像素，那么您的解决方案就会崩溃。还有一些标签，如“tea”、“yum”、“kid”，它们并不奇怪。
$(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);
}