基于html5实现的图片墙效果


Posted in HTML / CSS onOctober 16, 2014

本文实例讲述了基于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程序设计有所帮助。

HTML / CSS 相关文章推荐
html5+css3气泡组件的实现
Nov 21 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 HTML / CSS
AmazeUI 缩略图的实现示例
Aug 18 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
html5版canvas自由拼图实例
Oct 15 #HTML / CSS
HTML5地理定位实例
Oct 15 #HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 #HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 #HTML / CSS
HTML5 video 事件应用示例
Sep 11 #HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
Sep 11 #HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 #HTML / CSS
You might like
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
php析构函数的简单使用说明
2015/08/24 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
jQuery插件 tabBox实现代码
2010/02/09 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
使用python实现baidu hi自动登录的代码
2013/02/10 Python
决策树的python实现方法
2014/11/18 Python
python获取从命令行输入数字的方法
2015/04/29 Python
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
python中根据字符串调用函数的实现方法
2016/06/12 Python
基于Python的关键字监控及告警
2017/07/06 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
Python实现壁纸下载与轮换
2020/10/19 Python
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
会计岗位职责模板
2014/03/12 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
护理自荐信
2019/05/14 职场文书