html5_html5 튜토리얼 기술을 기반으로 한 그림벽 효과

이 기사의 예는 html5를 기반으로 한 그림 벽 효과를 설명하며 참고용으로 모든 사람과 공유됩니다. 구체적인 구현 방법은 다음과 같습니다.

그림 벽 효과와 함께 표시해야 하는 데이터 세트가 있습니다. 이러한 데이터는 동적이며 Anglejs를 사용하여 유지되며 추가 및 삭제할 수 있습니다.
인터페이스의 각 행은 최대 4셀.

코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

{{title}}

• 
  < div class="col-xs-6 col-sm-4 col-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> { "완료":"false", "항목":"명명2"},<br> { "완료":"false", "항목":"명명3"},<br> { "완료":"false", "항목":"明细43"}<br> ]},</p> <p> { title:"这是第2个列表",<br> list:[{ "done":"false", "item":"明细1"},<br> { "done":"false", " item":"명명2"},<br> { "완료":"false", "항목":"명명33"},<br> { "완료":"false", "항목":"명명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> { "완료":"false", "항목":"명명2"},<br> { "완료":"false", "항목":"명명3"},<br> { "완료": "false", "item":"明细43"}<br> ]},</p> <p> { title:"这是第2个列表",<br> list:[{ "done":"false", "item":"明细1"},<br> { "done":"false", " item":"명명2"},<br> { "완료":"false", "항목":"명명33"},<br> { "완료":"false", "항목":"명명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> { "완료":"false", "항목":"明细2"},<br> { "완료":"false", "항목":"明细33"},<br> { "완료": "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>