ホームページ >ウェブフロントエンド >H5 チュートリアル >html5_html5 チュートリアルのスキルに基づいたピクチャ ウォール効果
この記事の例は、HTML5 に基づいたピクチャー ウォール エフェクトを説明しており、参考のために皆さんと共有されています。具体的な実装方法は以下の通りです。
ピクチャー ウォールの効果を使用して表示する必要がある一連のデータがあります。これらのデータは動的であり、angularjs を使用して維持され、追加および削除できます。
インターフェイス上の各行には最大で 6 つのデータを含めることができます。 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>
<p> ]<br> };<br>app.controller("myCtrl",function($scope){<br> $scope.title="这里用来演表一表格布局, 例照片墙";<br> $scope .tasklist=myTaskList;</p>
<p><br>});<br></script>
Click here for the complete example codeDownload from this site.
I hope this article will be helpful to everyone’s HTML5 programming design.