Bildwandeffekt basierend auf html5_html5-Tutorial-Fähigkeiten

Das Beispiel in diesem Artikel beschreibt den Bildwandeffekt basierend auf HTML5 und wird als Referenz mit allen geteilt. Die spezifische Implementierungsmethode lautet wie folgt:

Es gibt eine Reihe von Daten, die mit dem Effekt einer Bilderwand angezeigt werden müssen. Diese Daten sind dynamisch, werden mit AngularJS verwaltet und können hinzugefügt und gelöscht werden.
Jede Zeile auf der Schnittstelle kann bis zu 4 Zellen.

Das Folgende ist der Code:

Code kopieren

Der Code lautet wie folgt:

{{title}}

• 
  < div class="col-xs-6 col-sm-4 col-md-3">
  

  
  

  
  
  • 
    
    
    
  
  

  
  

  
  

<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“ 🎜 > ]},</p> <p> { title:"这是第2个列表",<br> list:[{ "done": "false", "item": "明细1"},<br> { "done": "false", " item: „Falsche 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: „Falsch: 25“},<br> { „done“: „false“, „item“: „3“},<br> { „done“: „false“, „item“: „False“: 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: „False: 2“},<br> { „done“: „false“, „item“: „33“},<br> { „done“: „false“, „item“: „False“, „item“: „4 "}<br> ]},</p> <p> { title:"这是第3个列表",<br> list:[{ "done": "false", "item": "明细1"},<br> { "done": "false", " item: „Falsch: 25“},<br> { „done“: „false“, „item“: „3“},<br> { „done“: „false“, „item“: „False“: 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("myStrg",function($scope){<br> $scope.title="这里用来演示一个表格布局, 例如照片墙";<br> $scope .tasklist=myTaskList;</p> <p><br>});<br></script>

Cliquez ici pour l'exemple de code completTéléchargez depuis ce site.

J'espère que cet article sera utile à la conception de la programmation HTML5 de chacun.