Kesan dinding gambar berdasarkan kemahiran tutorial html5_html5

Contoh dalam artikel ini menerangkan kesan dinding gambar berdasarkan html5 dan dikongsi dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

Terdapat satu set data yang perlu dipaparkan dengan kesan dinding gambar Data ini adalah dinamik, diselenggara menggunakan angularjs, dan boleh ditambah dan dipadamkan
Setiap baris pada antara muka boleh mempunyai sehingga 4 sel.

Berikut ialah kod:

Salin kod

Kod tersebut adalah seperti berikut:

{{title}}

• 
  < div class="col-xs-6 col-sm-4 col-md-3">
  

  
  

  
  
  • 
    
    
    
  
  

  
  

  
  

var app=angular.module("app",[], function () {
console.log('started');
});

var myTaskList={
"semua": [
{ tajuk:"这是第一个列表",
senarai:[{ "done":"false", "item":"明细1" },
{ "selesai":"false", "item":"明细2"},
{ "done":"false", "item":"明细3"},
{ "done":"false", "item":"明细43"}
]},

{ tajuk:"这是第2个列表",
senarai:[{ "done":"false", "item":"明细1"},
{ "done":"false", " item":"明细2"},
{ "selesai":"salah", "item":"明细33"},
{ "selesai":"salah", "item":"明细4 "}
]},

{ tajuk:"这是第3个列表",
senarai:[{ "done":"false", "item":"明细1"},
{ "done":"false", " item":"明细25"},
{ "selesai":"salah", "item":"明细3"},
{ "selesai":"salah", "item":"明细4 "}
]},
{ tajuk:"这是第一个列表",
senarai:[{ "done":"false", "item":"明细1"},
{ "selesai":"salah", "item":"明细2"},
{ "selesai":"false", "item":"明细3"},
{ "selesai": "false", "item":"明细43"}
]},

{ tajuk:"这是第2个列表",
senarai:[{ "done":"false", "item":"明细1"},
{ "done":"false", " item":"明细2"},
{ "selesai":"salah", "item":"明细33"},
{ "selesai":"salah", "item":"明细4 "}
]},

{ tajuk:"这是第3个列表",
senarai:[{ "done":"false", "item":"明细1"},
{ "done":"false", " item":"明细25"},
{ "selesai":"salah", "item":"明细3"},
{ "selesai":"salah", "item":"明细4 "}
]},
{ tajuk:"这是第4个列表",
senarai:[{ "done":"false", "item":"明细13"},
{ "selesai":"salah", "item":"明细2"},
{ "selesai":"false", "item":"明细33"},
{ "selesai": "palsu", "item":"明细4"}
]}

]
};
app.controller("myCtrl",function($scope){
$scope.title="这里用来演示一个表格布局, 例如照";});

Klicken Sie hier für den vollständigen BeispielcodeDownload von dieser Website.

Ich hoffe, dass dieser Artikel für das HTML5-Programmierdesign aller hilfreich sein wird.