这篇文章主要讲解了“html5怎么实现的图片墙效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“html5怎么实现的图片墙效果”吧！
本文实例讲述了基于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">
<h4 class="label-info">{{title}}</h4>
<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" >
<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>
感谢各位的阅读，以上就是“html5怎么实现的图片墙效果”的内容了，经过本文的学习后，相信大家对html5怎么实现的图片墙效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
