Effet de mur d'images basé sur les compétences du didacticiel html5_html5

L'exemple de cet article décrit l'effet de mur d'images basé sur HTML5 et est partagé avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

Il existe un ensemble de données qui doivent être affichées avec l'effet d'un mur d'images. Ces données sont dynamiques, maintenues à l'aide d'angularjs et peuvent être ajoutées et supprimées
Chaque ligne de l'interface peut en contenir jusqu'à . 4 cellules.

Voici le code :

Copier le code

Le code est le suivant :

{{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"><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>

完整實例程式碼點擊此處本站下載。

希望本文所述對大家的html5程式設計有幫助。