基于html5如何实现的图片墙效果

每到春天,红得如火的木棉花,粉得如霞的芍药花,白得如玉的月季花竞相开放。它们有的花蕾满枝,有的含苞初绽,有的昂首怒放。一阵沁人心肺的花香引来了许许多多的小蜜蜂,嗡嗡嗡地边歌边舞。

本文实例讲述了基于html5实现的图片墙效果,分享给大家供大家参考。具体实现方法如下:

这里有一组数据需要用图片墙的效果来显示, 这些数据是动态的, 用angularjs来维护, 可增加和删除的.
界面上每行最多4个单元格.

以下是代码:

复制代码
代码如下:
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" rel="nofollow noopener noreferrer" 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程序设计有所帮助。

本文基于html5如何实现的图片墙效果到此结束。我喜欢出发,只为到达的地方都属于昨天,哪怕那山再清,那水再秀,那风再温柔,太深的留恋便成了一种羁绊,绊住的不仅有双脚,还有未来。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
HTML5之高度塌陷问题的如何解决

html5笛卡尔心形曲线的如何实现

如何使用feDisplacementMap+feImage滤镜如何实现水波纹效果(计算动态值)

如何使用canvas对video视频某一刻截图功能

Canvas如何做个雪花屏版404的如何实现