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

I have a div with a fixed width which contains 'tags' like the *-tags.

我有一个固定宽度的div,其中包含*-tags之类的'tags'。

Now, what's disturbing me, is that the Hallo Tag is in the last line, but it would fit in the first line. Like this:

现在,让我感到不安的是,Hallo标签在最后一行,但它适合第一行。喜欢这个:

The order of the elements is irrelevant. So, reordering would be an option.

元素的顺序无关紧要。因此,重新排序将是一种选择。

Question: How can i achieve this? I'm currently using a <ul><li></li></ul> construct.

问题:我怎样才能做到这一点?我目前正在使用

• 构造。

The nicest way would be a CSS-Way, but i guess it's up to JS to solve this problem. Any ideas would be appreciated :)

最好的方式是CSS-Way,但我想由JS来解决这个问题。任何想法,将不胜感激 :)

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

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

3 个解决方案

#1

Got it: The jsFiddle is here

知道了: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);
}

#2

Assuming that the container for the tags is a set-width, and the tags themselves aren't (ie: they inherit their width from their contents, rather than us being able to give them a set-width) there's not a huge amount that you can do from the CSS perspective without breaking and re-ordering the flow of the markup.

假设标签的容器是一个设置宽度,而标签本身不是(即:它们从内容继承它们的宽度,而不是我们能够给它们设置一个宽度),那么它的数量不大你可以从CSS的角度做,而不会破坏和重新排序标记的流程。

If the markup is being generated server-side I'm sure you could calculate widths and re-order prior to pushing the markup into the view. If not, you're a bit stuck without using JavaScript.

如果在服务器端生成标记,我确信您可以在将标记推入视图之前计算宽度并重新排序。如果没有,你有点卡住而不使用JavaScript。

Given that the order requirement appears to be purely appearance-based (ie: not functional), there's no harm in enhancing the standard float view that you've displayed in your screenshot with JavaScript. This means that JS-enabled visitors will get an 'enhanced' view (with the elements ordered nicely), whilst non-JS users would still have a fully-functional tag cloud, albeit in a slightly less-organised fashion.

鉴于订单要求似乎纯粹基于外观(即:不起作用),增强使用JavaScript在屏幕截图中显示的标准浮点视图没有任何害处。这意味着启用JS的访问者将获得“增强”视图(其中元素排序很好),而非JS用户仍然可以使用功能完备的标签云,尽管这种方式稍微有点不太有条理。

jQuery Masonry or Isotope would probably do would do exactly what you need.

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

#3

This is off the shelve solution. And a bit of a cheat with Masonry (notice the columnWidth: 1).

这是搁置解决方案。和砌体有点作弊(请注意columnWidth:1)。

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

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

I guess you could find more appropriate library for this or better html form for masonry to crunch.

我猜你可以为这个或更好的html表单找到更合适的库,以便砌筑。