基于html5实现的图片墙效果_html5教程技巧
- WBOY原创
- 2016-05-16 15:47:231939浏览
本文实例讲述了基于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>
完整实例代码点击此处本站下载。
希望本文所述对大家的html5程序设计有所帮助。