本文实例讲述了基于html5实现的图片墙效果，分享给大家供大家参考。具体实现方法如下：
这里有一组数据需要用图片墙的效果来显示, 这些数据是动态的, 用angularjs来维护, 可增加和删除的.
界面上每行最多4个单元格.
以下是代码:
复制代码<!DOCTYPE html>
<html ng-app=”app”>
<head lang=”en”>
<meta charset=”UTF-8″>
<link rel=”stylesheet” href=”css/bootstrap.min.css”>
<script src=”js/angular.min.js”></script>
<title>表格界面</title>
<style type=”text/css”>
ul{list-style:none;}
</style>
</head>
<body ng-controller=”myCtrl”>
<div class=”row”>
<div class=”col-sm-12″>
<h3 class=”label-info”>{{title}}</h3>
<input type=”button” value=”Add new list” class=”btn-primary”>
</div>
</div></p>
<p><div class=”row”>
<ul class=””>
<li ng-repeat=”i in tasklist.all”>
<div class=”col-xs-6 col-sm-4 col-md-3″>
<div class=”thumbnail”></p>
<p> <input type=”text” ng-model=”i.title” style=”width: 100%”>
<ul>
<li ng-repeat=”j in i.list”>
<input type=”checkbox” ng-model=”j.done”>
<input type=”text” ng-model=”j.item”>
</li>
</ul></p>
<p>
</div>
</div>
</li></p>
<p> </ul></p>
<p></div></p>
<p>
<script>
var app=angular.module(“app”,[], function () {
console.log(‘started’);
});</p>
<p> var myTaskList={
“all”: [
{ title:”这是第一个列表”,
list:[{ “done”:”false”, “item”:”明细1″},
{ “done”:”false”, “item”:”明细2″},
{ “done”:”false”, “item”:”明细3″},
{ “done”:”false”, “item”:”明细43″}
]},</p>
<p> { title:”这是第2个列表”,
list:[{ “done”:”false”, “item”:”明细1″},
{ “done”:”false”, “item”:”明细2″},
{ “done”:”false”, “item”:”明细33″},
{ “done”:”false”, “item”:”明细4″}
