Html5添加切換縮略圖模式和列表模式插件教程

1、Html結構
<main id='container'>
<header id='header'>
<span>View:</span>
<button class='view-list'>List</button>
<button class='view-grid'>Grid</button>
</header>
<ol class='grid' id='frame'>
<li class='frame'>
<div class='inset'>
<div class='image'></div>
<div class='info'>
<div class='title'>Lorem Ipsum</div>
<div class='description'></div>
<div class='shares'>
<div class='icon-lik likes'></div>
<div class='icon-ask comments'></div>
</div>
</div>
</div>
</li>
</ol>
</main>

2、調用插件
<link rel='stylesheet' href='http://libs.useso.com/js/jqueryui/1.10.4/css/jquery-ui.min.css'>
<script src='http://libs.useso.com/js/jquery/1.11.0/jquery.min.js'></script>
<script src='http://libs.useso.com/js/jqueryui/1.10.4/jquery-ui.min.js'></script>


$('#header button').on('click',function(){
  if ( $(this).hasClass('view-list') ) {
    $('#frame').removeClass('grid').addClass('list');
  } else if ( $(this).hasClass('view-grid') ) {
    $('#frame').removeClass('list').addClass('grid');
  }
});


$('.frame').each(function(){
  var images = ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg'];
  $(this).find('.image')
  .css({ 'background-image': 'url('+images[Math.floor(Math.random()*images.length)]+')' });
  var like = 100,
      likes = Math.floor(Math.random() * like) + 1;
  $(this).find('.likes').text(likes);
  var comment = 50,
      comments = Math.floor(Math.random() * comment) + 1;
  $(this).find('.comments').text(comments);
});

KeyMob移動端廣告平臺是國內最頂尖的移動端廣告平臺,爲廣告主提供精確高效的APP推廣營銷服務,爲開發者提供的SDK廣告合做,實現廣告主和開發者雙贏!