基于html5实现的图片墙效果_html5教程技巧

本文实例讲述了基于html5实现的图片墙效果，分享给大家供大家参考。具体实现方法如下：

这里有一组数据需要用图片墙的效果来显示, 这些数据是动态的, 用angularjs来维护, 可增加和删除的.
界面上每行最多4个单元格.

以下是代码:

复制代码

代码如下:

• 
  
  
  

<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> ]<br> };<br>app.controller("myCtrl",function($scope){<br> $scope.title="此处用于演示表格布局，例如照片墙";<br> $scope .tasklist=myTaskList;</p> <p><br>});<br></script>