Picture wall effect based on html5_html5 tutorial skills

The example in this article describes the picture wall effect based on html5 and is shared with everyone for your reference. The specific implementation method is as follows:

There is a set of data that needs to be displayed with the effect of a picture wall. These data are dynamic, maintained using angularjs, and can be added and deleted.
Each row on the interface can have up to 4 cells.

The following is the code:

Copy code

The code is as follows:

{{title}}

• 
  
  
  

  
  

  
  
  • 
    
    
    
  
  

  
  

  
  
  
  

<script><br> var app=angular.module("app",[], function () {<br> console.log('started');<br> });</p> <p> var myTaskList={<br> "all": [<br> { title:"这是第一个列表",<br> list:[{ "done":"false", "item":"明细1"},<br> { "done":"false", "item":"明细2"},<br> { "done":"false", "item":"明细3"},<br> { "done":"false", "item":"明细43"}<br> ]},</p> <p> { title:"这是第2个列表",<br> list:[{ "done":"false", "item":"明细1"},<br> { "done":"false", "item":"明细2"},<br> { "done":"false", "item":"明细33"},<br> { "done":"false", "item":"明细4"}<br> ]},</p> <p> { title:"这是第3个列表",<br> list:[{ "done":"false", "item":"明细1"},<br> { "done":"false", "item":"明细25"},<br> { "done":"false", "item":"明细3"},<br> { "done":"false", "item":"明细4"}<br> ]},<br> { title:"这是第一个列表",<br> list:[{ "done":"false", "item":"明细1"},<br> { "done":"false", "item":"明细2"},<br> { "done":"false", "item":"明细3"},<br> { "done":"false", "item":"明细43"}<br> ]},</p> <p> { title:"这是第2个列表",<br> list:[{ "done":"false", "item":"明细1"},<br> { "done":"false", "item":"明细2"},<br> { "done":"false", "item":"明细33"},<br> { "done":"false", "item":"明细4"}<br> ]},</p> <p> { title:"这是第3个列表",<br> list:[{ "done":"false", "item":"明细1"},<br> { "done":"false", "item":"明细25"},<br> { "done":"false", "item":"明细3"},<br> { "done":"false", "item":"明细4"}<br> ]},<br> { title:"这是第4个列表",<br> list:[{ "done":"false", "item":"明细13"},<br> { "done":"false", "item":"明细2"},<br> { "done":"false", "item":"明细33"},<br> { "done":"false", "item":"明细4"}<br> ]}</p> <p></p> <p> ]<br> };<br>app.controller("myCtrl",function($scope){<br> $scope.title="这里用来演示一个表格布局, 例如照片墙";<br> $scope.tasklist=myTaskList;</p> <p><br>});<br></script>

Klik di sini untuk kod contoh lengkapMuat turun dari tapak ini.

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan HTML5 semua orang.