本文實例講述了基于html5實現(xiàn)的圖片墻效果，分享給大家供大家參考。具體實現(xiàn)方法如下：
這里有一組數(shù)據(jù)需要用圖片墻的效果來顯示, 這些數(shù)據(jù)是動態(tài)的, 用angularjs來維護, 可增加和刪除的.
界面上每行最多4個單元格.
以下是代碼:
復(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:"這是第一個列表",
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技術(shù)專欄
公眾號
事業(yè)單位
當前位置：
公考類
招聘類
各類考試