CSS3を使用してJavascriptで画像を並べ替えるビジュアル並べ替え

Question

FaTaLでthis demoをチェックしてください。彼のblogでは、CSS3 :targetとtransitionsを使用して、画像のこの「視覚的な並べ替え」を達成したと説明されています。目標位置はpres.cssでハードコードされています

問題は、画像の配列がリアルタイムで生成されることです。ここにはdemoがあります。私は "視覚的に"これらの画像（ボタンクリック時）をアルファベット順にファイル名でソートします。どのようにして位置をハードコーディングしなくても、CSS3でそのような機能を実現できますか？ファイル名やその他のパラメータのJSONオブジェクトは、ソート時に実行時に使用できます。

Answer 1

これはまさに私が探していたものの種類ですhttp://isotope.metafizzy.co/ それはあなたのうちのいくつかを助けることを願っています。

Answer 2

私はどのCSSソリューションも考えられませんでした。そこで、ここに私の純粋なJavascriptソリューションがあります。 Live at http://jsfiddle.net/uhAEA/1/。

各aタグのsortelm属性に設定された値に基づいてソートされます。