基于html5實現的圖片墻效果

2020-03-22 19:24:01

字體：大中小

來源：轉載

供稿：網友

本文實例講述了基于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
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
div /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程序設計有所幫助。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：揭開HTML 5工作草稿的神秘面紗

下一篇：script標簽在HTML中的作用是什么？script標簽中typ