本文实例讲述了基于html5实现的图片墙效果，分享给大家供大家参考。具体实现方法如下：
这里有一组数据需要用图片墙的效果来显示, 这些数据是动态的, 用angularjs来维护, 可增加和删除的.
界面上每行最多4个单元格.
以下是代码:
复制代码
代码如下:
表格界面
{{title}}
var mytasklist={
all: [
{ title:这是第一个列表,
list:[{ done:false, item:明细1},
{ done:false, item:明细2},
{ done:false, item:明细3},
{ done:false, item:明细43}
]},
{ title:这是第2个列表,
list:[{ done:false, item:明细1},
{ done:false, item:明细2},
{ done:false, item:明细33},
{ done:false, item:明细4}
]},
{ title:这是第3个列表,
list:[{ done:false, item:明细1},
{ done:false, item:明细25},
{ done:false, item:明细3},
{ done:false, item:明细4}
]},
{ title:这是第一个列表,
list:[{ done:false, item:明细1},
{ done:false, item:明细2},
{ done:false, item:明细3},
{ done:false, item:明细43}
]},
{ title:这是第2个列表,
list:[{ done:false, item:明细1},
{ done:false, item:明细2},
{ done:false, item:明细33},
{ done:false, item:明细4}
]},
{ title:这是第3个列表,
list:[{ done:false, item:明细1},
{ done:false, item:明细25},
{ done:false, item:明细3},
{ done:false, item:明细4}
]},
{ title:这是第4个列表,
list:[{ done:false, item:明细13},
{ done:false, item:明细2},
{ done:false, item:明细33},
{ done:false, item:明细4}
]}
]
};
app.controller(myctrl,function($scope){
$scope.title=这里用来演示一个表格布局, 例如照片墙;
$scope.tasklist=mytasklist;
});
完整实例代码点击此处本站下载。
希望本文所述对大家的html5程序设计有所帮助。