Question

我有一个对象数组，表示页面上div元素的位置。数组是未排序的，我需要对它们进行排序，使它们按从左到右，然后从上到下的顺序排列。

阵列＆＃34;项目＆＃34;是：

[{
    "id": "Box 2",
    "x": 354,
    "y": 6
},
{
    "id": "Box 3",
    "x": 15,
    "y": 147
},
{
    "id": "Box 1",
    "x": 12,
    "y": 12
},
{
    "id": "Box 4",
    "x": 315,
    "y": 146
}]

我尝试用x：

进行排序

items.sort(function(a, b){
if (a.x == b.x) return a.y - b.y;
    return a.x - b.x || a.y - b.y;
});

和/或按y排序：

items.sort(function(a, b){
    if (a.y == b.y) return a.x - b.x;
    return a.y - b.y;
});

这些项目分别按x或y排序，但是我希望它们的排列方式使得数组排序为box1，box2，box3，box4：

Sorted by x,y

Answer 1

我想我现在明白你想要实现的目标，

我不确定.sort选项是否可行，我可能错了。

这是可以根据需要执行的工作代码，基于双索引比较和标记来标记已添加的框。

var arranged = [];
var items = [{
  "id": "Box 2",
  "x": 354,
  "y": 6
}, {
  "id": "Box 3",
  "x": 15,
  "y": 147
}, {
  "id": "Box 1",
  "x": 12,
  "y": 12
}, {
  "id": "Box 4",
  "x": 315,
  "y": 146
}]

items.sort(function(a, b) {
  //sort by x, secondary by y
  return a.x == b.x ? a.y - b.y : a.x - b.x;
});
console.log(items);


for (var i = 0; i < items.length; i++) {

  //check if was already added
  if (typeof(items[i].wasAdded) == "undefined") {
    arranged.push(items[i]);
    items[i].wasAdded = "true";

    for (j = i + 1; j < items.length; j++) {
      if (items[i].y > items[j].y && typeof(items[j].wasAdded) == "undefined") {
        arranged.push(items[j]);
        items[j].wasAdded = "true";
      }
    }
  }
}
console.log(arranged);

fiddle example

Answer 2

在试图解决一个非常相似的问题时到达了这里。这是我的结论：

除非您的项目在网格中，否则您可能实际上不希望按照您所描述的方式从上到下然后从左到右对它们进行排序。相反，您可能想根据它们与左上角的距离对其进行排序。

boxes.sort((a, b) => Math.hypot(a.x, a.y) - Math.hypot(b.x, b.y))

如果要对重叠的框进行排序，并且要为z-index找出一致的样式，则尤其如此。

boxes
  .sort((a, b) => Math.hypot(a.x, a.y) - Math.hypot(b.x, b.y))
  .forEach((box, i) => box.z = i)

JavaScript - 按位置排序对象（左，上）

2 个答案: