基於html5實現的圖片牆效果_html5教學技巧

本文實例講述了基於html5實現的圖片牆效果，分享給大家供大家參考。具體實作方法如下：

這裡有一組資料需要用圖片牆的效果來顯示, 這些資料是動態的, 用angularjs來維護, 可增加和刪除的.
介面上每行最多4個單元格.

以下是程式碼:

複製程式碼

程式碼如下:

{{title}}

• 
  
  

  
  

  
  
  • 
    
    
    
  
  

  
  

  
  

<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 プログラミング設計に役立つことを願っています。