-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
15692118659
沉沙
2018-06-20
来源 ：
阅读 1752
评论 0
摘要：本文实例讲述了基于HTML5实现的图片墙效果，分享给大家供大家参考。希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。
本文实例讲述了基于html5实现的图片墙效果，分享给大家供大家参考。具体实现方法如下：
这里有一组数据需要用图片墙的效果来显示, 这些数据是动态的, 用angularjs来维护, 可增加和删除的.
界面上每行最多4个单元格.
以下是代码:
代码如下:
<!DOCTYPE html>
<html ng-app="app">
<head>
<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>
<div>
<h3>{{title}}</h3>
<input type="button" value="Add new list">
</div>
</div></p> <p><div>
<ul class="">
<li ng-repeat="i in tasklist.all">
<div class="col-xs-6 col-sm-4 col-md-3">
<div></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>本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端HTML5/CSS3频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
资料领取
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
