溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
