html自动图片墙,基于html5实现的图片墙效果

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

这里有一组数据需要用图片墙的效果来显示, 这些数据是动态的, 用angularjs来维护, 可增加和删除的.

界面上每行最多4个单元格.

以下是代码:

复制代码代码如下:

表格界面

ul{list-style:none;}

{{title}}

var app=angular.module("app",[], function () {

console.log('started');

});

var myTaskList={

"all": [

{ title:"这是第一个列表",

list:[{ "done":"false", "item":"明细1"},

{ "done":"false", "item":"明细2"},

{ "done":"false", "item":"明细3"},

{ "done":"false", "item":"明细43"}

]},

{ title:"这是第2个列表",

list:[{ "done":"false", "item":"明细1"},

{ "done":"false", "item":"明细2"},

{ "done":"false", "item":"明细33"},

{ "done":"false", "item":"明细4"}

]},

{ 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"}

]},

{ title:"这是第2个列表",

list:[{ "done":"false", "item":"明细1"},

{ "done":"false", "item":"明细2"},

{ "done":"false", "item":"明细33"},

{ "done":"false", "item":"明细4"}

]},

{ 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"}

]}

]

};

app.controller("myCtrl",function($scope){

$scope.title="这里用来演示一个表格布局, 例如照片墙";

$scope.tasklist=myTaskList;

});

完整实例代码点击此处本站下载。

希望本文所述对大家的html5程序设计有所帮助。