基于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