基于html5实现的图片墙效果
本文实例讲述了基于html5实现的图片墙效果,分享给大家供大家参考。具体实现方法如下:
这里有一组数据需要用图片墙的效果来显示, 这些数据是动态的, 用angularjs来维护, 可增加和删除的.
界面上每行最多4个单元格.
以下是代码:
复制代码代码如下:
表格界面ul{list-style:none;}
{{title}}
var app=angular.module("app",[], function () {
console.log('started');
});
var myTaskList={
"all": [
{ title:"这是第一个列表",
list:[{ "done":"false", "item":"明细1"},
{ "done":"false", "item":"明细2"},
{ "done":"false", "item":"明细3"},
{ "done":"false", "item":"明细43"}
]},
{ title:"这是第2个列表",
list:[{ "done":"false", "item":"明细1"},
{ "done":"false", "item":"明细2"},
{ "done":"false", "item":"明细33"},
{ "done":"false", "item":"明细4"}
]},
{ 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"}
]},
{ title:"这是第2个列表",
list:[{ "done":"false", "item":"明细1"},
{ "done":"false", "item":"明细2"},
{ "done":"false", "item":"明细33"},
{ "done":"false", "item":"明细4"}
]},
{ 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"}
]}
]
};
app.controller("myCtrl",function($scope){
$scope.title="这里用来演示一个表格布局, 例如照片墙";
$scope.tasklist=myTaskList;
});
完整实例代码点击此处本站下载。
希望本文所述对大家的html5程序设计有所帮助。相关阅读:
iOS仿邮箱大师的九宫格手势密码解锁
有关Promises异步问题详解
php实现短信发送代码
AngularJS入门教程(二):AngularJS模板
WinXP系统在关机之前快速关闭多个窗口的技巧
简单讲解Java的Future编程模式
Win RT 8.1 Update 3怎么提前更新安装使用?
win7系统怎么使用用打印机扫描仪功能?win7系统扫描仪功能的使用方法图文教程
Android开发中CheckBox的简单用法示例
OS X Yosemite 独立安装U盘制作教程
Asp.net中的数据绑定Eval和Bind应用示例
Android 通知的基本用法示例代码
详解mysql建立索引的使用办法及优缺点分析
浅谈js中变量初始化