本文实例讲述了基于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}
]},</p> <p> { 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}
]},</p> <p> { title:这是第2个列表,
list:[{ done:false, item:明细1},
{ done:false, item:明细2},
{ done:false, item:明细33},
{ done:false, item:明细4}
]},</p> <p> { 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}
]}</p> <p></p> <p> ]
};
app.controller(myctrl,function($scope){
$scope.title=这里用来演示一个表格布局, 例如照片墙;
$scope.tasklist=mytasklist;</p> <p>
});
</script>
</body>
</html>
更多信息请查看IT技术专栏
公众号
事业单位
当前位置：
公考类
招聘类
各类考试
