How to realize the effect of picture wall based on html5
Editor to share with you how to achieve the picture wall effect based on html5, I hope you will gain something after reading this article, let's discuss it together!
The code is as follows:
Tabular interface
Ul {list-style:none;}
{{title}}
Var app=angular.module ("app", [], function () {
Console.log ('started')
});
Var myTaskList= {
"all": [
{title: "this is the first list"
List: [{"done": "false", "item": "detail 1"}
{"done": "false", "item": "details 2"}
{"done": "false", "item": "details 3"}
{"done": "false", "item": "details 43"}
]}
{title: "this is the second list"
List: [{"done": "false", "item": "detail 1"}
{"done": "false", "item": "details 2"}
{"done": "false", "item": "details 33"}
{"done": "false", "item": "detail 4"}
]}
{title: "this is the third list"
List: [{"done": "false", "item": "detail 1"}
{"done": "false", "item": "details 25"}
{"done": "false", "item": "details 3"}
{"done": "false", "item": "detail 4"}
]}
{title: "this is the first list"
List: [{"done": "false", "item": "detail 1"}
{"done": "false", "item": "details 2"}
{"done": "false", "item": "details 3"}
{"done": "false", "item": "details 43"}
]}
{title: "this is the second list"
List: [{"done": "false", "item": "detail 1"}
{"done": "false", "item": "details 2"}
{"done": "false", "item": "details 33"}
{"done": "false", "item": "detail 4"}
]}
{title: "this is the third list"
List: [{"done": "false", "item": "detail 1"}
{"done": "false", "item": "details 25"}
{"done": "false", "item": "details 3"}
{"done": "false", "item": "detail 4"}
]}
{title: "this is the fourth list"
List: [{"done": "false", "item": "details 13"}
{"done": "false", "item": "details 2"}
{"done": "false", "item": "details 33"}
{"done": "false", "item": "detail 4"}
]}
]
}
App.controller ("myCtrl", function ($scope) {
$scope.title= "this is used to demonstrate a table layout, such as a photo wall"
$scope.tasklist=myTaskList
});
After reading this article, I believe you have a certain understanding of "how to achieve the picture wall effect based on html5". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!
