垂直順序填充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; 
} 

只是爲了提高測試。