基于html5实现的图片墙效果_0.docVIP

基于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 pdiv 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 }); /scrip