基于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程序设计有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！