基于html5實(shí)現(xiàn)的圖片墻效果
侵權(quán)舉報(bào)/版權(quán)申訴本文實(shí)例講述了基于hml5實(shí)現(xiàn)的圖片墻效果，分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：這里有一組數(shù)據(jù)需要用圖片墻的效果來顯示,這些數(shù)據(jù)是動(dòng)態(tài)的,用agulaj來維護(hù),可增加和刪除的.界面上每行最多4個(gè)單元格.以下是......
以下是【金聰采編】分享的內(nèi)容全文：
以下是【金聰采編】分享的內(nèi)容全文：
本文實(shí)例講述了基于html5實(shí)現(xiàn)的圖片墻效果，分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
這里有一組數(shù)據(jù)需要用圖片墻的效果來顯示, 這些數(shù)據(jù)是動(dòng)態(tài)的, 用angularjs來維護(hù), 可增加和刪除的.
界面上每行最多4個(gè)單元格.
以下是代碼:
復(fù)制代碼
代碼如下:<!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:"這是第一個(gè)列表",
list:[{ "done":"false", "item":"明細(xì)1"},
{ "done":"false", "item":"明細(xì)2"},
{ "done":"false", "item":"明細(xì)3"},
{ "done":"false", "item":"明細(xì)43"}
]},</p><p> { title:"這是第2個(gè)列表",
list:[{ "done":"false", "item":"明細(xì)1"},
{ "done":"false", "item":"明細(xì)2"},
{ "done":"false", "item":"明細(xì)33"},
{ "done":"false", "item":"明細(xì)4"}
]},</p><p> { title:"這是第3個(gè)列表",
list:[{ "done":"false", "item":"明細(xì)1"},
{ "done":"false", "item":"明細(xì)25"},
{ "done":"false", "item":"明細(xì)3"},
{ "done":"false", "item":"明細(xì)4"}
]},
{ title:"這是第一個(gè)列表",
list:[{ "done":"false", "item":"明細(xì)1"},
{ "done":"false", "item":"明細(xì)2"},
{ "done":"false", "item":"明細(xì)3"},
{ "done":"false", "item":"明細(xì)43"}
]},</p><p> { title:"這是第2個(gè)列表",
list:[{ "done":"false", "item":"明細(xì)1"},
{ "done":"false", "item":"明細(xì)2"},
{ "done":"false", "item":"明細(xì)33"},
{ "done":"false", "item":"明細(xì)4"}
]},</p><p> { title:"這是第3個(gè)列表",
list:[{ "done":"false", "item":"明細(xì)1"},
{ "done":"false", "item":"明細(xì)25"},
{ "done":"false", "item":"明細(xì)3"},
{ "done":"false", "item":"明細(xì)4"}
]},
{ title:"這是第4個(gè)列表",
list:[{ "done":"false", "item":"明細(xì)13"},
{ "done":"false", "item":"明細(xì)2"},
{ "done":"false", "item":"明細(xì)33"},
{ "done":"false", "item":"明細(xì)4"}
]}</p><p></p><p> ]
};
app.controller("myCtrl",function($scope){
$scope.title="這里用來演示一個(gè)表格布局, 例如照片墻";
$scope.tasklist=myTaskList;</p><p>
});
</script>
</body>
</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:"這是第一個(gè)列表",
list:[{ "done":"false", "item":"明細(xì)1"},
{ "done":"false", "item":"明細(xì)2"},
{ "done":"false", "item":"明細(xì)3"},
{ "done":"false", "item":"明細(xì)43"}
]},</p><p> { title:"這是第2個(gè)列表",
list:[{ "done":"false", "item":"明細(xì)1"},
{ "done":"false", "item":"明細(xì)2"},
{ "done":"false", "item":"明細(xì)33"},
{ "done":"false", "item":"明細(xì)4"}
]},</p><p> { title:"這是第3個(gè)列表",
list:[{ "done":"false", "item":"明細(xì)1"},
{ "done":"false", "item":"明細(xì)25"},
{ "done":"false", "item":"明細(xì)3"},
{ "done":"false", "item":"明細(xì)4"}
]},
{ title:"這是第一個(gè)列表",
list:[{ "done":"false", "item":"明細(xì)1"},
{ "done":"false", "item":"明細(xì)2"},
{ "done":"false", "item":"明細(xì)3"},
{ "done":"false", "item":"明細(xì)43"}
]},</p><p> { title:"這是第2個(gè)列表",
list:[{ "done":"false", "item":"明細(xì)1"},
{ "done":"false", "item":"明細(xì)2"},
{ "done":"false", "item":"明細(xì)33"},
{ "done":"false", "item":"明細(xì)4"}
]},</p><p> { title:"這是第3個(gè)列表",
list:[{ "done":"false", "item":"明細(xì)1"},
{ "done":"false", "item":"明細(xì)25"},
{ "done":"false", "item":"明細(xì)3"},
{ "done":"false", "item":"明細(xì)4"}
]},
{ title:"這是第4個(gè)列表",
list:[{ "done":"false", "item":"明細(xì)13"},
{ "done":"false", "item":"明細(xì)2"},
{ "done":"false", "item":"明細(xì)33"},
{ "done":"false", "item":"明細(xì)4"}
]}</p><p></p><p> ]
};
app.controller("myCtrl",function($scope){
$scope.title="這里用來演示一個(gè)表格布局, 例如照片墻";
$scope.tasklist=myTaskList;</p><p>
});
</script>
</body>
</html>
完整實(shí)例代碼點(diǎn)擊此處本站下載。
希望本文所述對大家的html5程序設(shè)計(jì)有所幫助。
