Html5添加切换缩略图模式和列表模式插件教程

一、Html结构

View:
List
Grid

1. 
   
   
   

   
   

   
   

   Lorem Ipsum

   
   

   
   

   
   

   
   

   
   

   
   

   
   
   
   

二、调用插件





$('#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广告合作,实现广告主和开发者共赢!