Html5-based image wall Effects,
This article mainly introduces the image wall effect based on html5. The example shows how to display the data with the image wall effect. For more information, see
This article describes the effects of image walls based on html5 and shares them with you for your reference. The specific implementation method is as follows:
There is a set of data that needs to be displayed with the image wall effect. The data is dynamic and maintained using angularjs, which can be added and deleted.
There are up to four cells in each row on the interface.
The following code is used:
The Code is as follows: <! 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> Table Interface </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 }}<Input type = "button" value = "Add new list" class = "btn-primary">
</Div>
</Div> </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> <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> </ul> </p> </div> </p> <p>
<Script>
Var app = angular. module ("app", [], function (){
Console. log ('started ');
}); </P> <p> var myTaskList = {
"All ":[
{Title: "This is the first list ",
List: [{"done": "false", "item": "details 1 "},
{"Done": "false", "item": "details 2 "},
{"Done": "false", "item": "details 3 "},
{"Done": "false", "item": "details 43 "}
] },</P> <p> {title: "This is 2nd lists ",
List: [{"done": "false", "item": "details 1 "},
{"Done": "false", "item": "details 2 "},
{"Done": "false", "item": "details 33 "},
{"Done": "false", "item": "details 4 "}
] },</P> <p> {title: "This is 3rd lists ",
List: [{"done": "false", "item": "details 1 "},
{"Done": "false", "item": "details 25 "},
{"Done": "false", "item": "details 3 "},
{"Done": "false", "item": "details 4 "}
]},
{Title: "This is the first list ",
List: [{"done": "false", "item": "details 1 "},
{"Done": "false", "item": "details 2 "},
{"Done": "false", "item": "details 3 "},
{"Done": "false", "item": "details 43 "}
] },</P> <p> {title: "This is 2nd lists ",
List: [{"done": "false", "item": "details 1 "},
{"Done": "false", "item": "details 2 "},
{"Done": "false", "item": "details 33 "},
{"Done": "false", "item": "details 4 "}
] },</P> <p> {title: "This is 3rd lists ",
List: [{"done": "false", "item": "details 1 "},
{"Done": "false", "item": "details 25 "},
{"Done": "false", "item": "details 3 "},
{"Done": "false", "item": "details 4 "}
]},
{Title: "This is the first list ",
List: [{"done": "false", "item": "details 13 "},
{"Done": "false", "item": "details 2 "},
{"Done": "false", "item": "details 33 "},
{"Done": "false", "item": "details 4 "}
]} </P> <p>]
};
App. controller ("myCtrl", function ($ scope ){
$ Scope. title = "here is a demonstration of a table layout, such as photo wall ";
$ Scope. tasklist = myTaskList; </p> <p>
});
</Script>
</Body>
</Html>
Click here to download the complete instance code.
I hope this article will help you with html5 program design.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
