本文實例講述了基於html5實現的圖片牆效果，分享給大家供大家參考。具體實作方法如下：
這裡有一組資料需要用圖片牆的效果來顯示, 這些資料是動態的, 用angularjs來維護, 可增加和刪除的.
介面上每行最多4個單元格.
以下是程式碼:
<script><br /> var app=angular.module("app",[], function () {<br /> console.log('started');<br /> }); </script>
var myTaskList={
"all": [
{ title:"這是第一個清單",
list:[{ "done":"false", "item":"明細1" },
{ "done":"false", "item":"明細2"},
{ "done":"false", "item":"明細3"},
{ "done":"false", "item":"明細43"}
]},
{ title:"這是第2個列表",
list:[{ "done":"false", "item":"明細1"},
{ "done":"false ", " item":"明細2"},
{ "done":"false", "item":"明細33"},
{ "done":"false", "item": "明細4 "}
]},
{ title:"這是第 3 個列表",
list:[{ "done":"false", "item":"明細1"},
{ "done":"false ", " item":"明細25"},
{ "done":"false", "item":"明細3"},
{ "done":"false", "item": "明細4 "}
]},
{ title:"這是第一個列表",
list:[{ "done":"false", "item":"明細1"} ,
{ "done":"false", "item":"明細2"},
{ "done":"false", "item":"明細3"},
{ " done": "false", "item":"明細43"}
]},
{ title:"這是第2個列表",
list:[{ "done":"false", "item":"明細1"},
{ "done":"false ", " item":"明細2"},
{ "done":"false", "item":"明細33"},
{ "done":"false", "item": "明細4 "}
]},
{ title:"這是第 3 個列表",
list:[{ "done":"false", "item":"明細1"},
{ "done":"false ", " item":"明細25"},
{ "done":"false", "item":"明細3"},
{ "done":"false", "item": "明細4 "}
]},
{ title:"這是第4 個列表",
list:[{ "done":"false", "item":"明細13"} ,
{ "done":"false", "item":"明細2"},
{ "done":"false", "item":"明細33"},
{ " done": "false", "item":"明細4"}
]}
]
};
app.controller("myCtrl",function($scope){
$scope.title="此處用於演示表格佈局，例如照片牆";
$scope .tasklist=myTaskList;
});
完全なサンプルコードについては、ここをクリックしてくださいこのサイトからダウンロードしてください。
この記事が皆様の HTML5 プログラミング設計に役立つことを願っています。
