按垂直顺序填充JQuery Mobile Scrollview元素

我正在尝试使用jquerymobile创建一个类似于windows8开始菜单（Metro风格）的菜单

为此，我将使用JQuery Mobile

Scrollview

。（）

Scrollview

按水平顺序添加元素（如下图所示）

上图是真实的屏幕截图

但是我想按垂直顺序将元素添加到

Scrollview

（如下图所示）

上面的图像不是真实的。这是我的目标。（我在MS Paint:P中创建了它）

所以，我的问题是：如何将

Scrollview

的添加顺序更改为垂直顺序？（如第二幅图）

与此一致

您应该移动列表上的项目，以便重新排列所需的序列（例如转换矩阵），一旦获得所需的序列，就可以删除上面的列表并重新创建它，然后移动jquery应用其效果

我试过这个（用你的例子，我在本地复制了这个页面），虽然不好，但是你明白了

<script>

$(document).ready(function(){


var arr = $.map( $(".threeByThree").children().text(), function(n){
   return n;
 });

var result = [];
var results;

while(arr.length){

    transform(arr.splice(0,8));     
}   

function transform(arr){

    var a = [
        [arr[0], arr[1], arr[2]],
        [arr[3], arr[4], arr[5]],
        [arr[6], arr[7], arr[8]]
    ],

    w = a.length ? a.length : 0,
    h = a[0] instanceof Array ? a[0].length : 0;

  if(h === 0 || w === 0) { return []; }

  var i, j, t = [];

  for(i=0; i<h; i++) {

    t[i] = [];

    for(j=0; j<w; j++) {

       t[i][j] = a[j][i];
    }
  }

results = result += t;
result += t; 

var rm = ',';

results = $.grep(results, function(value) {
  return value != rm;
});

}

$('.threeByThree').children().remove();

$.each(results, function(index, value){$('.threeByThree').append('<div class="square">'+value+'</div>');

});

});

</script>

这只是一个改进的测试。

与此一致

您应该移动列表上的项目，以便重新排列所需的序列（例如转换矩阵），一旦获得所需的序列，就可以删除上面的列表并重新创建它，然后移动jquery应用其效果

我试过这个（用你的例子，我在本地复制了这个页面），虽然不好，但是你明白了

<script>

$(document).ready(function(){


var arr = $.map( $(".threeByThree").children().text(), function(n){
   return n;
 });

var result = [];
var results;

while(arr.length){

    transform(arr.splice(0,8));     
}   

function transform(arr){

    var a = [
        [arr[0], arr[1], arr[2]],
        [arr[3], arr[4], arr[5]],
        [arr[6], arr[7], arr[8]]
    ],

    w = a.length ? a.length : 0,
    h = a[0] instanceof Array ? a[0].length : 0;

  if(h === 0 || w === 0) { return []; }

  var i, j, t = [];

  for(i=0; i<h; i++) {

    t[i] = [];

    for(j=0; j<w; j++) {

       t[i][j] = a[j][i];
    }
  }

results = result += t;
result += t; 

var rm = ',';

results = $.grep(results, function(value) {
  return value != rm;
});

}

$('.threeByThree').children().remove();

$.each(results, function(index, value){$('.threeByThree').append('<div class="square">'+value+'</div>');

});

});

</script>

---

这只是一个需要改进的测试。

很抱歉，我使用您的代码得到一个空的滚动视图（请参见：）您可以将更改应用于此文件（）并将更改后的文件发送给我吗？谢谢。很抱歉，在您的示例中，请使用水平滚动视图而不是垂直滚动视图。谢谢。@Mahdi，这个例子是改变物品顺序的一种方法（不好），然后我想你可以应用其他效果。我知道jquerymobile，但滚动在本地不起作用。这是我想要更改顺序因子的示例，因为我使用编程语言（ASP.NET或PHP）下载RSS提要，我认为我还应该使用ASP.NET或PHP以正确的顺序生成元素。你觉得怎么样？很抱歉，我用你的代码得到了一个空的scrollview（请参见：）你能将你的更改应用到这个文件（）并将更改后的文件发送给我吗？谢谢。很抱歉，在您的示例中，请使用水平滚动视图而不是垂直滚动视图。谢谢。@Mahdi，这个例子是改变物品顺序的一种方法（不好），然后我想你可以应用其他效果。我知道jquerymobile，但滚动在本地不起作用。这是我想要更改顺序因子的示例，因为我使用编程语言（ASP.NET或PHP）下载RSS提要，我认为我还应该使用ASP.NET或PHP以正确的顺序生成元素。你怎么认为？