Weird behaviour with for loop in JavaScript

I have this image table that has two columns and 20 rows. When executing this for loop, all the rows are working okay except for the first row, which only displays the first image on the left. It's really weird; is there something wrong with the order of the execution?

var image= [];
var rows=5;        
for (var i = 0; i < test.length; i++) {
    var avatar = test[i].image; // The profile image

    if(i % 2 === 0){
        image[i]= 开发者_JAVA百科Titanium.UI.createImageView({
            top:row,
            image:avatar
            align:right
            });
        win.add(image[i]);
        //trying to increase the image
        row =row+200;
    } else if(i % 2 === 1) {
        image[i]= Titanium.UI.createImageView({
            top:row,
            image:avatar
            align:left
            });
        win.add(image[i]);
    }
}

i=0, i%2=0, show the image (supposed to be right), row+=200;

i=1, i%2=1, show the image (left side), row stays same

i=2, i%2=0, show the image (right side), row+=200

0%2 = 0, and that represents your right side image, and then it goes to the next line. Just need to play around with where you increment row and which side your loop starts with.