排序元素javascript

Question

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

我的元素按 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 个填充物）： link text 然后点击图库，您会看到“第 1 列”（6 个缩略图）

所有元素（缩略图和填充）都插入到数组中（javascript），所以我需要用 JS 更改每个元素的位置 (或者 jquery，如果你更容易）

我知道这不是一个简单的问题，如果您对此问题有任何疑问，请随时提出，我会尽快回答。

edit：好的，感谢文森特·罗伯特，我离得更近了。我的对象数组（我的缩略图在这里）现在需要按照文森特的数字数组的方式进行排序。我测试了他的方法，该方法将数组的元素排序到完美的位置。 他们使用数字作为索引，但我没有。有人知道怎么做吗？

Answer 1

您必须将您的值视为像素。如果要对它们进行排序，则需要先计算它们的位置，然后将该位置转换为表格中的偏移量。

一旦有了偏移量，就很容易对数组进行排序。这是一个示例代码（从 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);
}

Answer 2

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

这是我的代码：

<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>