[]list 加载动画为什么实现的效果会错乱掉？

var WID = 80,
HEI = 400;
function Item1()
{
Item1.__super.call(this);
this.size(WID, HEI);
this.setImg = function(src)
{

var ani = new Animation();
ani.loadAtlas(src); // 加载图集动画
ani.interval = 100; // 设置播放间隔（单位：毫秒）
ani.index = 1; // 当前播放索引
ani.play(); // 播放图集动画

// 获取动画的边界信息
var bounds = ani.getGraphicBounds();
ani.scale(80/bounds.width ,80/bounds.height)
this.addChild(ani)

}
}
Laya.class(Item1, "Item1", Box);

var List = Laya.List;
function setup(effList)
{
var list = new List();

list.itemRender = Item1;

list.repeatX = 3;
list.repeatY = 4;

list.x = (Laya.stage.width - WID * list.repeatY) / 2 - 100;
list.y = (Laya.stage.height - HEI ) / 2;

// 使用但隐藏滚动条
list.vScrollBarSkin = "";

list.selectEnable = true;
list.selectHandler = new Handler(this, onSelect);

list.renderHandler = new Handler(this, updateItem);
Laya.stage.addChild(list);

list.array = effList;
}

function updateItem(cell, index)
{
console.log(cell.dataSource);
cell.setImg(cell.dataSource);
}

function onSelect(index)
{
console.log("当前选择的索引：" + index);
}
 
 
我想实现的效果是   设置每个特效宽高都为80 * 80   然后一排显示3个 界面上可以看到四排   但是显示出来的效果就第一排显示三个正常  但是宽高不是我想要的80 * 80   往下拉的话显示就开始不正常了，在往上拉上去第一排也不正常了。