来源：自学PHP网 时间：2015-01-26 11:14 作者： 阅读:次
[导读] 这篇文章主要为大家介绍了基于html5实现的图片墙效果,实例展示了数据用图片墙的效果来显示的实现方法,需要的朋友可以参考下...
|
这篇文章主要为大家介绍了基于html5实现的图片墙效果,实例展示了数据用图片墙的效果来显示的实现方法,需要的朋友可以参考下
本文实例讲述了基于html5实现的图片墙效果，分享给大家供大家参考。具体实现方法如下： 这里有一组数据需要用图片墙的效果来显示, 这些数据是动态的, 用angularjs来维护, 可增加和删除的. 以下是代码: 复制代码 代码如下:<!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程序设计有所帮助。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
