ホームページ >ウェブフロントエンド >H5 チュートリアル >html5_html5 チュートリアルのスキルに基づいたピクチャ ウォール効果

html5_html5 チュートリアルのスキルに基づいたピクチャ ウォール効果

WBOY
WBOYオリジナル
2016-05-16 15:47:231958ブラウズ

この記事の例は、HTML5 に基づいたピクチャー ウォール エフェクトを説明しており、参考のために皆さんと共有されています。具体的な実装方法は以下の通りです。

ピクチャー ウォールの効果を使用して表示する必要がある一連のデータがあります。これらのデータは動的であり、angularjs を使用して維持され、追加および削除できます。
インターフェイス上の各行には最大で 6 つのデータを含めることができます。 4 つのセル。

コードは次のとおりです:


コードをコピーします
コードは次のとおりです:




<リンク rel="stylesheet" href="css/bootstrap.min.css">

表格界面





{{title}}








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











<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.

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:HTML5 シェイク コードの最適化には DeviceMotionEvent などが含まれます_html5 チュートリアル スキル次の記事:HTML5 シェイク コードの最適化には DeviceMotionEvent などが含まれます_html5 チュートリアル スキル

関連記事

続きを見る