试试用 UICollectionView 实现？动态计算 cell 的宽高，形状的的不同用不同的背景图模拟，点击事件就用直接实现对应的 delegate 方法

所谓九宫格也就是两条横线两条竖线划分出来的。
你可以随机生成4个随机数（范围10-40就差不多了）,其中两个来作为竖线在屏幕的位置，另外两个作为横在屏幕的位置。

var a = Math.ceil(Math.random()*30)+10;
var b = Math.ceil(Math.random()*30)+10;
var c = Math.ceil(Math.random()*30)+10;
var d = Math.ceil(Math.random()*30)+10;
document.write('<table width="500" height="900" border="1"><tr>');
document.write('<td width="'+a+'%" height="'+b+'%"></td>');
document.write('<td width="'+c+'%"></td>');
document.write('<td></td>');
document.write('</tr><tr>');
document.write('<td height="'+d+'%"></td>');
document.write('<td></td>');
document.write('<td></td>');
document.write('</tr><tr>');
document.write('<td></td>');
document.write('<td></td>');
document.write('<td></td>');
document.write('</tr></table>');