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

Question

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

我将使用JQuery Mobile Scrollview来实现此目的。 （see this example）

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

上图是真实截图

但我想按垂直顺序将{elemets>添加到Scrollview（如下图所示）

以上图片并非真实。这是我的目标。 （我在MS Paint创建它：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;
}

只是一项改进的测试。