這篇文章主要為大家介紹了基於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">
<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>
完整實例代碼點擊此處本站下載。
希望本文所述對大家的Html5程序設計有所幫助。