Filling JQuery Mobile Scrollview elements in vertical order

Question

I am trying to create a menu just like Windows 8 Start Menu (Metro style) using JQuery Mobile.

I'm going to use JQuery Mobile Scrollview for this purpose. (see this example)

Scrollview adds elemets by Horizontal order (like the image below)

Above image is real screenshot

But I want to add elemets to the Scrollview by vertical order (like the image below)

Above Image is NOT real. It's my goal. (I have created it in MS Paint :P )

So, my question is: How to change adding order of the Scrollview to vertical order? (like the second image)

Answer 1

In agreement with this POST

you should move items on the list in order to reorder the desired sequence (eg translation matrices), once you get what you can eliminate the above list and recreate it again, after which the mobile jquery apply its effects.

I tried this (using your example, i've copied the page on local), it is not nice but you get the idea.

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

and

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

is just a test to improve.