ページ内オブジェクトを左上から順に並び替える

質問

座標の並べ替えの計算について質問させて頂きます。
javascriptで、以下のような座標（左上基点）のリストを、左上から右下の順に並べ替えるためにはどのような関数を作成すれば良いか分からずにこまっています。

var list =
[
{ id : 0, x :138.313077609396, y :183.402580877775 },
{ id : 1, x :15.0606060605741, y :138.374 },
{ id : 2, x :15.0606060605741, y :228.41 },
{ id : 3, x :138.312606060574, y :228.41 },
{ id : 4, x :76.6868418349849, y :228.41 },
{ id : 5, x :76.6868418349849, y :183.392 },
{ id : 6, x :15.0860776093956, y :183.367 },
{ id : 7, x :138.312606060574, y :138.374 },
{ id : 8, x :76.6868418349849, y :138.374 },
{ id : 9, x :15.0303030302711, y :15.030303030303 },
{ id : 10, x :138.373999999968, y :53.2886884952961 }
];

□1□ | □2□ | □3□ | □4□
□5□ | □6□ | □7□ | □8□
□9□ | □10□ | □11□ | □12□
…

といった順に並べ替えたいのです。
詳しい方、いらっしゃいましたら、ご教示のほど、宜しくお願い申し上げます。

回答No.4

b0a0a · ベストアンサー

まあ不可能だと思ったほうがいいです。
例えば１がもし上の方にも伸びていれば1->6->2となるでしょうし、
現状でも1->6->2と絶対ならない理由はないでしょう。
それこそ、2は画像を含んでいるので目が移りやすいとかそういったこともあるでしょう。

ですのでもう単純にy座標だけで決めたほうがいいです。
そしてy座標が同じならxを見ます。
ただしlistはy座標が微妙にずれているので注意がいります。

お礼

ありがとうございます！
なるほど、ということは、はじめにページ全体のY座標を100分割くらいにしてしまって、似たようなY座標を全部同じにしてしまってから、Y座標が同じならxを見るという感じでやれば、なんとなく、そんな感じになりそうですかね。
こちらもちょっと試してみたいと思います！
ありがとうございました！

回答No.5

sanzero

プログラムを考えないという方法もあります。要件に合致するかどうかはわかりませんが下記のようなプラグインがあります。
http://blog.shuffleee.com/1793/
http://on-ze.com/archives/1929

その他
http://matome.naver.jp/odai/2136089272724471701

お礼

ありがとうございます！
pluginで対応ですね。ありがとうございます。
今回の要件ですが、このような計算によってランダムな雰囲気に配置された画像の座標を全部取得して、人が目で追うような右から左への順でに並べ替えて、いろいろやりたいという感じです。
ご教示頂いたプラグインの中を見て、計算方法を確認しつつアルゴリズムを理解しつつ、再度考えたいと思います！
ありがとうございました。

回答No.3

b0a0a

これは座標だけで決められるものではありません。
例えばサンプル画像でもしも画像９の高さが極端に小さく、
９の底が８の頭よりも上であれば、８と９は逆転するでしょう。
他にもそのlist配列は並び替えるのに当たって諸問題がいくつかありそうに見えます。

お礼

ありがとうございます！確かに…ご指摘の通りですね…。
こういう場合は、左上座標のリストだけでは要件通りのソートはできないということですね…。
一般的にこのような要件の場合、どのようなリストを作成してソートを行うのでしょうか…。
かなり複雑な計算になるのでしょうか。
javascriptの学習を始めたばかりのため、見当もつきません…。
ヒントだけでもご教示頂けましたら幸いです。

回答No.2

b0a0a

そもそも左上とは？
あるものと、それに対してyが0.1低く、xが10高いものはどちらを前とするのですか？

補足

>あるものと、それに対してyが0.1低く、xが10高いものはどちらを前とする

たしかに、ここを明確にしないとソートできませんね…。ありがとうございます！
アメコミのコマを目で追うようにソートしたいのですが、こういう場合は「あるもの」が前になります。
ですので実際には「アメコミのコマを目で追う」とは、異なる要件であることが分かりました…申し訳ございません…涙。

そして、いろいろと質問の仕方が酷いことを実感し、以下にロケーションを画像イメージで用意いたしました。
これはピンタレストのトップですが、ちょうど、ページ全体の左上が基点0,0で、それぞれのブロックの左上の座標がランダムに格納されているデータをイメージして頂ければと存じます。
これを四角で振った連順番のように並べて行きたいのです。

http://nandemo.wpblog.jp/wp-content/mydata/scs.png

回答No.1

Hanagefactory

実際に並び替えたい部分は実行していないので座標が、どこにあるかは視覚的には認識していませんが、
xとyはそれぞれ横と縦だと思います。
対して左上というのは座標にするには両方必要です。

ここで必要なのは要件。
どのように並び替えたいか。
左上から並べたように見えるという事はどういう事かを定義する必要があります。

一つの案としては
「左上座標0,0との距離が近い順」
それで並び替えはできるかと思います。

お礼

ありがとうございます！
なるほど、距離を追加して比較するとか、いろいろ方法ありそうですね！
良いのですね、早速やってみます！

補足

> どのように並び替えたいか。左上から並べたように見えるという事はどういう事かを定義する必要があります。

ありがとうございます。
並び替えは、左上をx:0,y:0とした場合に、以下の様に配列をソートしたいと考えています。

□1□ | □2□ | □3□ | □4□
□5□ | □6□ | □7□ | □8□
□9□ | □10□ | □11□ | □12□

左上から、左から右まで順番に走査して、一段下がって、また走査してといった感じで、丁度アメリカンコミックのコマを目で追う順番にソートしたいと考えています。