基于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 相关文章推荐
使用css3绘制出各种几何图形
Aug 17 HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
Nov 12 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
Mar 02 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 HTML / CSS
phonegap常用事件总结(必看篇)
Mar 31 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 HTML / CSS
为什么你写的height:100%不起作用
May 10 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
ADODB类使用
2006/11/25 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
Python中处理unchecked未捕获异常实例
2015/01/17 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
python实现简单的tcp 文件下载
2020/09/16 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
经典演讲稿汇总
2014/05/19 职场文书
应届毕业生自荐信
2014/05/28 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
五好家庭申报材料
2014/12/20 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
2019毕业论文致谢词
2019/06/24 职场文书