Grid-List

by Knower

HTML

<button class="list">Список</button>
<button class="grid">Сетка</button>

<div id="ajax-box" class="list">
  <article>
    <img src="http://placehold.it/180x180">
    <h2>Заголовок поста</h2>
    <p>Анонс поста</p>
  </article>
  <article>
    <img src="http://placehold.it/180x180">
    <h2>Заголовок поста</h2>
    <p>Анонс поста</p>
  </article>
  <article>
    <img src="http://placehold.it/180x180">
    <h2>Заголовок поста</h2>
    <p>Анонс поста</p>
  </article>
</div>

CSS

#ajax-box {
  width: 100%;
  margin-top: 15px;
}

#ajax-box article:after {
  clear: both;
  content: "";
  display: table;
}

#ajax-box article h2 {
  font-size: 14px;
  text-transform: uppercase;
}

#ajax-box.list article {
  width: 100%;
  float: none;
}

#ajax-box.list article img {
  float: left;
  margin-right: 15px;
}

#ajax-box.grid article {
  width: 30%;
  margin-right: 1%;
  float: left;
}

#ajax-box.grid article img {
  float: none;
  margin: 0;
  max-width: 100%;
  height: auto;
}

JavaScript

(function($) {

  $('button').on('click', function(e) {
    if ($(this).hasClass('grid')) {
      $('#ajax-box').removeClass('list').addClass('grid');
    } else if ($(this).hasClass('list')) {
      $('#ajax-box').removeClass('grid').addClass('list');
    }
  });
})(jQuery);