基于html5實現(xiàn)的圖片墻效果
來源:易賢網 閱讀:1496 次 日期:2014-11-27 09:07:25
溫馨提示:易賢網小編為您整理了“基于html5實現(xiàn)的圖片墻效果”,方便廣大網友查閱!

本文實例講述了基于html5實現(xiàn)的圖片墻效果,分享給大家供大家參考。具體實現(xiàn)方法如下:

這里有一組數(shù)據(jù)需要用圖片墻的效果來顯示, 這些數(shù)據(jù)是動態(tài)的, 用angularjs來維護, 可增加和刪除的.

界面上每行最多4個單元格.

以下是代碼:

復制代碼代碼如下:<!doctype html>

<html ng-app=app>

<head lang=en>

<meta charset=utf-8>

<link rel=stylesheet href=css/bootstrap.min.css>

<script src=js/angular.min.js></script>

<title>表格界面</title>

<style type=text/css>

ul{list-style:none;}

</style>

</head>

<body ng-controller=myctrl>

<div class=row>

<div class=col-sm-12>

<h3 class=label-info>{{title}}</h3>

<input type=button value=add new list class=btn-primary>

</div>

</div></p> <p><div class=row>

<ul class=>

<li ng-repeat=i in tasklist.all>

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

<div class=thumbnail></p> <p> <input type=text ng-model=i.title style=width: 100%>

<ul>

<li ng-repeat=j in i.list>

<input type=checkbox ng-model=j.done>

<input type=text ng-model=j.item>

</li>

</ul></p> <p>

</div>

</div>

</li></p> <p> </ul></p> <p></div></p> <p>

<script>

var app=angular.module(app,[], function () {

console.log('started');

});</p> <p> var mytasklist={

all: [

{ title:這是第一個列表,

list:[{ done:false, item:明細1},

{ done:false, item:明細2},

{ done:false, item:明細3},

{ done:false, item:明細43}

]},</p> <p> { title:這是第2個列表,

list:[{ done:false, item:明細1},

{ done:false, item:明細2},

{ done:false, item:明細33},

{ done:false, item:明細4}

]},</p> <p> { 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}

]},</p> <p> { title:這是第2個列表,

list:[{ done:false, item:明細1},

{ done:false, item:明細2},

{ done:false, item:明細33},

{ done:false, item:明細4}

]},</p> <p> { 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}

]}</p> <p></p> <p> ]

};

app.controller(myctrl,function($scope){

$scope.title=這里用來演示一個表格布局, 例如照片墻;

$scope.tasklist=mytasklist;</p> <p>

});

</script>

</body>

</html>

更多信息請查看IT技術專欄

更多信息請查看網頁制作
易賢網手機網站地址:基于html5實現(xiàn)的圖片墻效果

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯(lián)系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:526150442(9:00—18:00)版權所有:易賢網