垂直顺序填充JQuery Mobile滚动查看元素

Question

我正在尝试使用JQuery Mobile创建一个类似Windows 8 Start Menu（Metro风格）的菜单。

我打算为此使用JQuery Mobile Scrollview。 （see this example）

Scrollview由卧式为了增加elemets（如下图）

上面的影像是真实截图

但我想通过垂直为了增加elemets到Scrollview（如下图）

上图不是真实的。这是我的目标。 （我在MS画图创建它：P）

所以，我的问题是：如何将Scrollview的添加顺序更改为垂直顺序？ （如第二图像）

Answer 1

同意本POST

你应该将名单上的项目，以重新排序所需的序列（如翻译矩阵），一旦你得到了什么，你可以消除上述名单并重新创建它，然后移动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> 

和

.threeByThree > .ui-scrollview-view { 
    height: 300px; 
    background-color: white; 
} 

只是为了提高测试。