| 标题 | 基于html5实现的图片墙效果 |
| 内容 | 本文实例讲述了基于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> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。