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

この記事の例は、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.