固定幅のdivでの並べ替えと配置

Question

のdiv にはstackoverflow-tagsのような「タグ」が含まれています。今

、私を乱す何、Halloタグが最後の行にあることですが、それは最初の行に収まるでしょう。このように：

要素の順序は無関係です。したがって、並べ替えがオプションになります。

質問：これをどのように達成できますか？私は現在<ul><li></li></ul>構成を使用しています。

CSSウェイが最適な方法ですが、この問題を解決するにはJSまでと思っています。 任意のアイデアをいただければ幸いです:)

UPDATE JSFiddle：彼らはそれらの幅を継承：http://jsfiddle.net/CLj2q/

Answer 1

はそれを手に入れた：jsFiddleは、HTMLは、サーバー側に作成された場合、それはあまりにもあなたのタグのサーバー側を注文する、おそらく最善です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

のタグのコンテナがセット幅、タグ自体はすなわち（ではないと仮定すると、それらのコンテンツから、あなたにそれらを与えることができるのではなく）、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フォームのためのより適切なライブラリを見つけることができると思います。