排序元素javascript

Question

我正在寻找一种方法来分类我的元素，但这并不像听起来那么容易。请让我解释一下

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

xx   xx   xx
xx   xx   xx
xx   xx   xx

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

如果x的数量不可能与6分离，例如有11 x，则添加填充元素(o's)。

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填充)：链接文本然后点击图库，你会看到‘列’1(6个缩略图)

所有元素(缩略图和填充物)被插入到数组 (javascript)中，因此我需要用JS (或者jquery )更改每个元素的位置(如果对您来说更容易)

我知道这不是一个简单的问题，我尽力解释你是否有任何关于这个问题的问题，请放心，我会尽快回答。

编辑:好的，多亏了文森特·罗伯特，我离得更近了。我的对象数组(我的缩略图在这里)现在需要像文森特的数字数组那样排序。我测试了他的方法，该方法将数组的元素排序到它们的完美位置。他们用数字作为索引，但我没有。有人知道怎么做吗？

Answer 1

我发现已经有了答案，我采用了一种稍微少一些的计算方法，但我不确定这是否只是按照正确的顺序显示它们，还是需要稍后真正地排序。

这是我的代码：

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