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

代码如下:

表格界面

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;

});