排序元素javascript

我正在寻找一种对元素进行排序的方法，但这并不像听起来那么简单。请让我解释一下

我的元素按6个元素缩略图分组，每个x代表一个缩略图，但所有缩略图都在一个div内

xx   xx   xx
xx   xx   xx
xx   xx   xx

第一列6 x是可见的，当您单击按钮时，下一列出现，旧列消失

如果恰好x的数量不可能与6分开，例如，您有11个x，那么它会添加填充元素o

xx   xx
xx   xx
xx   x0

如果每个元素，不管是缩略图还是填充符，都表示它们在这个“表”中的添加顺序，那么它看起来是这样的

1,2    3,4    5,6
7,8    9,10   11,12
13,14  15,16  17,18

然而，我想有最新的缩略图1->6的初始页面。因为它们是最新的缩略图，所以我想先展示它们。按“日期”排序，这意味着前面的“表格”需要如下所示：

1,2    7,8    13,14
3,4    9,10   15,16
5,6    11,12  17,18

现在的困难是，无论有多少列，无论是只有2列还是10列，它都应该重新排列缩略图

以下是问题2栏、7个缩略图和5个填充物的实时链接： 然后点击gallery，你会看到“column”16个缩略图

所有元素的缩略图和填充符都插入到一个数组javascript中，因此我需要使用JS或jquery更改每个元素的位置，如果对您更方便的话

我知道这不是一个简单的问题，我尽力解释，如果你对这个问题有任何疑问，请随时提问，我会尽快回答

编辑：好吧，多亏了文森特·罗伯特，我离你更近了。我的对象数组我的缩略图刚才在这里，需要按照Vincent的数字数组进行排序。我测试了他的方法，它将数组的元素排列到完美的位置。

---

他们用数字作为索引，但我没有。有人知道怎么做吗？

你必须把你的值看作像素。如果要对它们进行排序，首先需要计算它们的位置，然后将此位置转换为表中的偏移量

一旦获得偏移量，就可以很容易地对数组进行排序。下面是一个基于0的示例代码，以简化：

// Your constants
var nbGroup = 3, 
    nbCol = 2
    nbLine = 3,
    nbPerGroup = nbCol * nbLine;

function computeOffset(index)
{
   // Search the block
   var group = Math.round(index / nbPerGroup - 0.5);
   var groupPos = index % nbPerGroup;

   // Search the line
   var line = Math.round(groupPos / nbCol - 0.5);
   // Search the column
   var col = groupPos % nbCol;

   // This formula is dependent on your layout
   return col
        + line * nbCol * nbGroup
        + group * nbCol;
}

// Fill an array from 0 to 17
var array = [];
for( var i = 0; i < 18; ++i )
{
  array.push(i);
}

// Sort our array based on the position offset
array.sort(function(a, b)
{
  return computeOffset(a) - computeOffset(b);
});


console.log(array); // [0, 1, 6, 7, 12, 13, 2, 3, 8, 9, 14, 15, 4, 5, 10, 11, 16, 17]

我没有对DOM节点进行实际排序，但您足够聪明，可以自己进行排序，是吗-

好的，要对DOM节点数组进行排序，您必须能够访问或计算节点的索引。以下是一个未经测试的解决方案代码：

var elements = ...

var nodes = []
for( var i = 0, l = elements.length; i < l; ++i )
{
    nodes.push({ index:i, element:elements[i] });
}

nodes.sort(function(a, b)
{
    return computeOffset(a.index) - computeOffset(b.index);
});

// Your DOM array should be sorted now.
// Note that you will have to append DOM nodes (yes again) 
// to the document to actually sort the displayed elements.

var target = ...

for( var i = 0, l = nodes.length; i < l; ++i )
{
    target.appendChild(nodes[i].element);
}

---

我知道已经有了答案，我采用了一种计算量稍小的方法，但我不确定这是否只是为了按正确的顺序显示它们一次，或者以后是否需要对内容进行真正的排序

这是我的密码：

<style type="text/css">

    ul { 
        padding: 0; 
        margin: 0 2px 2px 0; 
        overflow: hidden; width: 200px; 
        background-color: red; 
        float: left;
    }



</style>
<script type="text/javascript">
    var thumbsDOTlength = 30;

    var col = 0;
    var perRow = 6;

    var html = [];
    html.push("<ul>");
    for(var i = 0; i < thumbsDOTlength; i++) {
        html.push("<li> Item " + i + "  (" + col + "," + (i - col * perRow) + ")</li>");

        if(i % perRow == perRow - 1) {
            html.push("</ul><ul>");
            col++;
        }
    }

    html.push("</ul>");

    document.write(html.join(''));

</script>

---

我不太明白。。。这些列是否仅用于显示目的？或者它们是数据结构的一部分？我称之为列，因为它看起来像一个，但不是一个。基本上，5号和11号元素都已清除。在具有3列的实时版本中，元素17也将被清除。明白了吗？多谢了，我测试了你的理论，效果很好。继续做好这项工作。只有当您仅对容器编号进行排序的数组时，它才似乎有效。但在本例中，数组包含缩略图。知道如何解决这个问题吗？当我测试函数中的a和b时，它需要是一个整数，现在不是。我需要传递元素的索引。我试过了，但没有成功。感谢AdvanceEdit添加DOM节点排序，希望这有助于：