Сниппеты для оформления ресурсов раздела, состоящего из статей

В этой статье приведены готовые сниппеты, которые Вы можете использовать для оформления ресурсов из определённого раздела или из всех разделов вашего сайта.

Сниппет галереи статей #1

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-4 col-xs-12">
      <!-- Блок 1 -->
      <div class="wp-block inverse no-margin">
        <div class="figure">
          <img src="http://itchief.ru/assets/demo/image/image1-400-400.jpg">
          <div class="wp-block-info-over left">
            <h2>
              <span class="pull-left">
              <a href="#">Omnis voluptas</a>
              <span class="label label-primary">Lorem ipsum</span>
              </span>
            </h2>
          </div>
        </div>
        <h2 class="title">Consequuntur magni dolores</h2>
        <p>
          Nisi ut aut perferendis doloribus asperiores repellat. eum iure reprehenderit.
          Reprehenderit, qui in culpa, qui illo inventore veritatis. Asperiores repellat.
         quae ab illo inventore veritatis et aut perferendis.
        </p>
      </div>
    </div>
     <div class="col-md-4 col-sm-4 col-xs-12">
      <!-- Block Default - More info over block -->
      <div class="wp-block inverse no-margin">
        <div class="figure">
          <img src="http://itchief.ru/assets/demo/image/image2-400-400.jpg">
          <div class="wp-block-info-over left">
            <h2>
              <span class="pull-left">
              <a href="#">Omnis voluptas</a>
              <span class="label label-primary">Lorem ipsum</span>
              </span>
            </h2>
          </div>
        </div>
        <h2 class="title">Consequuntur magni dolores</h2>
        <p>
          Nisi ut aut perferendis doloribus asperiores repellat.
          eum iure reprehenderit. Reprehenderit, qui in culpa,
          qui illo inventore veritatis. Asperiores repellat.
          quae ab illo inventore veritatis et aut perferendis.
        </p>
      </div>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-12">
      <!-- Block Default - More info over block -->
      <div class="wp-block inverse no-margin">
        <div class="figure">
          <img src="http://itchief.ru/assets/demo/image/image3-400-400.jpg">
          <div class="wp-block-info-over left">
            <h2>
              <span class="pull-left">
              <a href="#">Omnis voluptas</a>
              <span class="label label-primary">Lorem ipsum</span>
              </span>
            </h2>
          </div>
        </div>
        <h2 class="title">Consequuntur magni dolores</h2>
        <p>
          Nisi ut aut perferendis doloribus asperiores repellat.
         eum iure reprehenderit. Reprehenderit, qui in culpa,
         qui illo inventore veritatis. Asperiores repellat.
         quae ab illo inventore veritatis et aut perferendis.
        </p>
      </div>
    </div>  
  </div>
</div>

CSS:

.wp-block {
  margin: 0 0 15px 0;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  position: relative;
  cursor: default;
  border-radius: 2px;
}
a:hover{
  text-decoration:none;
}
.no-margin {
  margin: 0 !important;
}
.wp-block.inverse .figure {
  position: relative;
}
.wp-block.inverse .figure img {
  width: 100%;
}
.wp-block-info-over.left {
  background: transparent;
  border: 0;
  padding: 0;
  position: absolute;
  bottom: 55px;
  left: 0;
}
.wp-block-info-over {
  width: 100%;
  padding: 10px;
  background: #9cd70e;
  border-top: 1px solid #e0eded;
}
.wp-block-info-over.left h2 {
  font-size: 13px;
  font-weight: normal;
}
.wp-block.inverse h2, .wp-block.inverse .title {
  margin: 0;
  padding: 12px 15px 0 0;
  font-weight: 500;
  font-size: 16px;
  color: #333;
  text-transform: none;
}
.wp-block-info-over.left h2 a {
  padding: 10px 15px 20px 15px;
  margin: 0;
  font-size: 16px;
  text-transform: capitalize;
  font-weight: 600;
  background: rgba(51,51,51,0.8);
  background: #2c3e50;
  color: #fff;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.wp-block-info-over.left h2 .label {
  position: absolute;
  bottom: -30px;
  left: 15px;
  padding: .5em .6em .5em;
}
.wp-block.inverse h2, .wp-block.inverse .title {
  margin: 0;
  padding: 12px 15px 0 0;
  font-weight: 500;
  font-size: 16px;
  color: #333;
  text-transform: none;
}
.label {
  border-radius: 0;
}

Сниппет галереи статей #2

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="card card-favorite">
        <div class="card-img-container">
          <a href="#"
 style="background-image:url('http://itchief.ru/assets/demo/image/image1-400-200.jpg')"
 class="card-img"></a>
        </div>
        <div class="card-content">
          <div class="card-meta">
            <span class="meta-date meta-box">
              11 Января              
            </span>
            <span class="meta-pulse meta-box">
              <a href="#" class="card-share-number sharrre">50 Поделиться</a>
            </span>
          </div>
          <h2>
            <a href="#">
              Quaerat voluptatem sequi nesciunt        
            </a>   
          </h2>
        </div>
        <span class="meta-tags">
          <a href="#" title="tags" class="tag">Тег</a> 
        </span>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card card-favorite">
        <div class="card-img-container">
          <a href="#"
 style="background-image:url('http://itchief.ru/assets/demo/image/image2-400-200.jpg')"
 class="card-img"></a>
        </div>
        <div class="card-content">
          <div class="card-meta">
            <span class="meta-date meta-box">
              14 Января              
            </span>
            <span class="meta-pulse meta-box">
              <a href="#" class="card-share-number sharrre">50 Поделиться</a>
            </span>
          </div>
          <h2>
            <a href="#">
              Quaerat voluptatem sequi nesciunt        
            </a>   
          </h2>
        </div>
        <span class="meta-tags">
          <a href="#" title="tags" class="tag">Тег</a> 
        </span>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card card-favorite">
        <div class="card-img-container">
          <a href="#"
 style="background-image:url('http://itchief.ru/assets/demo/image/image3-400-200.jpg')"
 class="card-img"></a>
        </div>
        <div class="card-content">
          <div class="card-meta">
            <span class="meta-date meta-box">
              18 Января              
            </span>
            <span class="meta-pulse meta-box">
              <a href="#" class="card-share-number sharrre">50 Поделиться</a>
            </span>
          </div>
          <h2>
            <a href="#">
              Quaerat voluptatem sequi nesciunt        
            </a>   
          </h2>
        </div>
        <span class="meta-tags">
          <a href="#" title="tags" class="tag">Тег</a> 
        </span>
      </div>
    </div>    
  </div>    
</div>

CSS:

.card {
  min-width: 0;
  margin: 20px 10px;
  width: 100%;    
  background: #0C0C0C;
  color: #696969;
  -webkit-transition: .3s ease all;
  transition: .3s ease all;
  border: none;
  border-radius: 5px;
  padding: 0;
  margin-bottom: 30px;
}
.card .card-img-container .card-img {
  background-size: cover;
  background-position: top center;
  display: block;
  height: 175px;
}
.card .card-img {
  height: 150px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.card .card-img-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.card .card-content {
  padding: 20px 20px 40px;
  text-align: center;
}
.card .card-meta {
  font-size: 12px;
}
.card .meta-box {
  margin-right: 20px;
}
.card .card-content h2 {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.4;
}
.card h2 a {
  color: #D0D0D0;
  -webkit-transition: .3s ease all;
  transition: .3s ease all;
}
a:hover{
    text-decoration:none;    
}
.card:hover h2 a {
  color: #FFF;
}
.card .meta-tags a:hover {
  color: #FFF;
}
.card .meta-tags .tag {
  background: #DD1B16;
  color: #f9c7c6;
}
.card .meta-tags a:last-child {
  margin-right: 0;
  border-bottom-right-radius: 5px;
}
.card .meta-tags a:first-child {
  border-top-left-radius: 5px;
}
.card .meta-tags a {
  display: inline-block;
  padding: 3px 8px;
  color: #FFF;
  -webkit-transition: .3s ease all;
  transition: .3s ease all;
}

Сниппет галереи статей #3

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="wp-block property list">
        <div class="wp-block-body">
          <div class="wp-block-img">
            <a href="#">
              <img src="http://itchief.ru/assets/demo/image/image1-800-530.jpg" alt="">
            </a>
          </div>
          <div class="wp-block-content">
            <small>
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 11.01.2015</small>
            <h4 class="content-title">Lorem ipsum</h4>
            <p class="description">Lorem ipsum dolor sit amet,
         consectetur adipisg elitm Ut tincidunt purus iaculis ipsum dctum non dtum quam.</p>
            <span class="pull-left">
              <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>  
              Bootstrap 3
            </span>
            <span class="pull-right">
              <span class="capacity">
                <i class="fa fa-user"></i> Имя Фамилия
              </span>
            </span>
          </div>
        </div>
        <div class="wp-block-footer">
          <ul class="aux-info">
            <li><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 365</li>
            <li><span class=" glyphicon glyphicon-comment" aria-hidden="true"></span> 5</li>
            <li><span class="glyphicon glyphicon-star" aria-hidden="true"></span> 2</li>
            <li><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
      +5 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></li>
            <li><span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
            Тег 1, Тег 2, Тег 3</li>
          </ul>
        </div>
      </div>
      <div class="wp-block property list">
        <div class="wp-block-body">
          <div class="wp-block-img">
            <a href="#">
              <img src="http://itchief.ru/assets/demo/image/image2-800-530.jpg" alt="">
            </a>
          </div>
          <div class="wp-block-content">
            <small>
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 11.01.2015</small>
            <h4 class="content-title">Lorem ipsum</h4>
            <p class="description">Lorem ipsum dolor sit amet, consectetur adipisg elitm
    Ut tincidunt purus iaculis ipsum dctum non dtum quam.</p>
            <span class="pull-left">
              <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>   Bootstrap 3
            </span>
            <span class="pull-right">
              <span class="capacity">
                <i class="fa fa-user"></i> Имя Фамилия
              </span>
            </span>
          </div>
        </div>
        <div class="wp-block-footer">
          <ul class="aux-info">
            <li><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 365</li>
            <li><span class=" glyphicon glyphicon-comment" aria-hidden="true"></span> 5</li>
            <li><span class="glyphicon glyphicon-star" aria-hidden="true"></span> 2</li>
            <li><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
   +5 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span></li>
            <li><span class="glyphicon glyphicon-tags" aria-hidden="true">
 </span> Тег 1, Тег 2, Тег 3</li>
          </ul>
        </div>
      </div>
    </div>
  </div> 
</div>

CSS:

.wp-block.property.list {
  border: 1px solid #e0eded;
  margin-bottom: 15px !important;
}
.wp-block {
  margin: 0 0 15px 0;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
  position: relative;
  cursor: default;
  border-radius: 2px;
}
.wp-block.property.list {
  padding: 15px 15px 0 15px;
}
.wp-block.property.list {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
}
.wp-block .wp-block-body {
  padding: 15px;
}
.wp-block.property.list .wp-block-img {
  display: table-cell;
  width: 250px;
}
.wp-block.property.list .wp-block-img img {
  width: 100%;
}
.wp-block.property.list .wp-block-content .content-title {
  font-size: 20px;
  color: #3498db;
  margin-bottom: 5px;
}
.wp-block.property.list .wp-block-body .wp-block-content {
  display: table-cell;
  vertical-align: top;
  padding-left: 15px;
}
.wp-block.property.list .wp-block-content .description {
  padding-bottom: 10px;
  border-bottom: 1px solid #e0eded;
}
.wp-block.property.list .wp-block-footer ul.aux-info {
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
  background: #fcfcfc;
  border-top: 1px solid #e0eded;
}
.wp-block.property.list .wp-block-footer ul.aux-info li {
  display: table-cell;
  padding: 10px 15px;
  vertical-align: middle;
  border-right: 1px solid #e0eded;
}
.ribbon.base {
  background: #3498db;
  color: #fff;
  border-right: 5px solid #8bc4ea;
}
.ribbon {
  position: absolute;
  top: 20px;
  right: -5px;
  padding: 15px;
}
.base {
  background: #3498db;
  color: #fff !important;
}
.ribbon:before, .ribbon:after {
  content: '';
  position: absolute;
  left: -9px;
  border-left: 10px solid transparent;
}
.ribbon:before {
  top: 0;
}
.ribbon.base:before {
  border-top: 27px solid #3498db;
}
.ribbon.base:after {
  border-bottom: 27px solid #3498db;
}
.ribbon:after {
  bottom: 0;
}

Сниппет галереи статей #4

HTML:

<div class="container">
  <div class="row">
    <section id="pinBoot">
      <article class="white-panel">
        <img src="http://itchief.ru/assets/demo/image/image1-400-400.jpg">
        <h4><a href="#">Заголовок 1</a></h4>
        <p>6 июня 2015 | <span class="glyphicon glyphicon-eye-open" aria-hidden="true">
    </span> 365 | <span class=" glyphicon glyphicon-comment" aria-hidden="true">
   </span> 4 | <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true">
   </span> +5 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true">
  </span></p>
        <p>Lorem ipsum occaecat cupidatat non proident.</p>
      </article>
      <article class="white-panel">
        <img src="http://itchief.ru/assets/demo/image/image3-400-400.jpg">
        <h4><a href="#">Заголовок 2</a></h4>
        <p>10 июня 2015 | <span class="glyphicon glyphicon-eye-open" aria-hidden="true">
     </span> 321 | <span class=" glyphicon glyphicon-comment" aria-hidden="true">
    </span> 2 | <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true">
</span> +3 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true">
</span></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 sed do eiusmod tempor incididunt ut est laborum.</p>
      </article>
      <article class="white-panel">
        <img src="http://itchief.ru/assets/demo/image/image1-800-530.jpg">
        <h4><a href="#">Заголовок 3</a></h4>
        <p>12 июня 2015 | <span class="glyphicon glyphicon-eye-open" aria-hidden="true">
</span> 183 | <span class=" glyphicon glyphicon-comment" aria-hidden="true">
</span> 6 | <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true">
</span> -3 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true">
</span></p>
        <p>Duis aut irure dolor in reprehenderit in voluptate velit esse.</p>
      </article>
      <article class="white-panel">
        <img src="http://itchief.ru/assets/demo/image/image2-400-200.jpg">
        <h4><a href="#">Заголовок 4</a></h4>
        <p>14 июня 2015 | <span class="glyphicon glyphicon-eye-open" aria-hidden="true">
</span> 203 | <span class=" glyphicon glyphicon-comment" aria-hidden="true"></span> 1 |
<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> +1
<span class="glyphicon glyphicon-thumbs-down" aria-hidden="true">
</span></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 sed do eiusmod tempor
 incididunt ut labore ut aliquip ex ea commodo consequat.
 Duis aut irure dolor in reprehenderit in
 voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 Excepteur sint occaecat cupidatat non proident,
 sunt in culpa qui officia
 deserunt mollit anim id est laborum.</p>
      </article>
      <article class="white-panel">
        <img src="http://itchief.ru/assets/demo/image/image3-400-200.jpg">
        <h4><a href="#">Заголовок 5</a></h4>
        <p>19 июня 2015 | <span class="glyphicon glyphicon-eye-open" aria-hidden="true">
</span> 217 | <span class=" glyphicon glyphicon-comment" aria-hidden="true">
</span> 2 | <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true">
</span> +3 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true">
</span></p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
 nisi ut aliquip ex ea commodo nulla pariatur. Excepteur sint occaecat
 cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 Minim veniam, quis nostrud exercitation ullamco laboris nisi ut
 aliquip ex ea commodo nulla pariatur. Excepteur sint occaecat cupidatat
 non proident, sunt in culpa qui officia deserunt mollit anim id. Nulla pariatur.
 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
 deserunt mollit anim id est laborum. Minim veniam, quis nostrud exercitation
 ullamco laboris nisi ut aliquip ex ea commodo nulla pariatur.
 Excepteur sint occaecat cupidatat non proident.</p>
      </article>
      <article class="white-panel">
        <img src="http://itchief.ru/assets/demo/image/image2-800-530.jpg">
        <h4><a href="#">Заголовок 6</a></h4>
        <p>21 июня 2015 | <span class="glyphicon glyphicon-eye-open" aria-hidden="true">
</span> 98 | <span class=" glyphicon glyphicon-comment" aria-hidden="true">
</span> 1 | <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true">
</span> +2 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true">
</span></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 sed do eiusmod tempor incididunt ut labore et cillum dolore eu fugiat
 nulla pariatur. Excepteur sint occaecat cupidatat non proident,
 sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </article>
      <article class="white-panel">
        <img src="http://itchief.ru/assets/demo/image/image2-400-400.jpg">
        <h4><a href="#">Заголовок 7</a></h4>
        <p>26 июня 2015 | <span class="glyphicon glyphicon-eye-open" aria-hidden="true">
</span> 107 | <span class=" glyphicon glyphicon-comment" aria-hidden="true">
</span> 2 | <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true">
</span> +7 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true">
</span></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 sed do eiusmod tempor incididunt ut labore nisi ut aliquip ex ea commodo consequat.
 Duis aut irure dolor in reprehenderit in voluptate velit esse cillum dolore
 eu fugiat nulla pariatur.
 Excepteur sint occaecat cupidatat non proident.</p>
      </article>
      <article class="white-panel">
        <img src="http://itchief.ru/assets/demo/image/image1-400-200.jpg">
        <h4><a href="#">Заголовок 8</a></h4>
        <p>1 июля 2015 | <span class="glyphicon glyphicon-eye-open" aria-hidden="true">
</span> 32 | <span class=" glyphicon glyphicon-comment" aria-hidden="true">
</span> 5 | <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true">
</span> +7 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true">
</span></p>
        <p>Lorem ipsum dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
 commodo consequat.</p>
      </article>
    </section>
    <hr>
  </div>
</div>

CSS:

body {
  background-color:#eee;   
}    
#pinBoot {
  position: relative;
  max-width: 100%;
  width: 100%;
}
img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.white-panel {
  position: absolute;
  background: white;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
  padding: 10px;
}
.white-panel h1 {
  font-size: 1em;
}
.white-panel h1 a {
  color: #A92733;
}
.white-panel:hover {
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
  margin-top: -5px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

JavaScript:

$(document).ready(function() {
  $('#pinBoot').pinterest_grid({
    no_columns: 3,
    padding_x: 10,
    padding_y: 10,
    margin_bottom: 50,
    single_column_breakpoint: 700
  });
});
//плагин pinterest_grid
;(function ($, window, document, undefined) {
  var pluginName = 'pinterest_grid',
    defaults = {
      padding_x: 10,
      padding_y: 10,
      no_columns: 3,
      margin_bottom: 50,
      single_column_breakpoint: 700
    },
    columns,
    $article,
    article_width;
    function Plugin(element, options) {
      this.element = element;
      this.options = $.extend({}, defaults, options) ;
      this._defaults = defaults;
      this._name = pluginName;
      this.init();
    }
    Plugin.prototype.init = function () {
      var self = this,
          resize_finish;
      $(window).resize(function() {
        clearTimeout(resize_finish);
        resize_finish = setTimeout( function () {
          self.make_layout_change(self);
        }, 11);
      });
      self.make_layout_change(self);
      setTimeout(function() {
        $(window).resize();
      }, 500);
    };
    Plugin.prototype.calculate = function (single_column_mode) {
      var self = this,
          tallest = 0,
          row = 0,
          $container = $(this.element),
          container_width = $container.width();
          $article = $(this.element).children();
      if(single_column_mode === true) {
        article_width = $container.width() - self.options.padding_x;
      } 
      else {
        article_width = ($container.width() - self.options.padding_x * self.options.no_columns)
        / self.options.no_columns;
      }
      $article.each(function() {
        $(this).css('width', article_width);
      });
      columns = self.options.no_columns;
      $article.each(function(index) {
        var current_column,
            left_out = 0,
            top = 0,
            $this = $(this),
            prevAll = $this.prevAll(),
            tallest = 0;
        if(single_column_mode === false) {
          current_column = (index % columns);
        } 
        else {
          current_column = 0;
        }
        for(var t = 0; t < columns; t++) {
          $this.removeClass('c'+t);
        }
        if(index % columns === 0) {
          row++;
        }
        $this.addClass('c' + current_column);
        $this.addClass('r' + row);
        prevAll.each(function(index) {
          if($(this).hasClass('c' + current_column)) {
            top += $(this).outerHeight() + self.options.padding_y;
          }
        });
        if(single_column_mode === true) {
          left_out = 0;
        } 
        else {
          left_out = (index % columns) * (article_width + self.options.padding_x);
        }
        $this.css({
          'left': left_out,
          'top' : top
        });
      });
      this.tallest($container);
      $(window).resize();
    };
    Plugin.prototype.tallest = function (_container) {
      var column_heights = [],
          largest = 0;
      for(var z = 0; z < columns; z++) {
        var temp_height = 0;
        _container.find('.c'+z).each(function() {
          temp_height += $(this).outerHeight();
        });
        column_heights[z] = temp_height;
      }
      largest = Math.max.apply(Math, column_heights);
      _container.css('height', largest + (this.options.padding_y + this.options.margin_bottom));
    };
    Plugin.prototype.make_layout_change = function (_self) {
      if($(window).width() < _self.options.single_column_breakpoint) {
        _self.calculate(true);
      } 
      else {
        _self.calculate(false);
      }
    };
    $.fn[pluginName] = function (options) {
      return this.each(function () {
         if (!$.data(this, 'plugin_' + pluginName)) {
           $.data(this, 'plugin_' + pluginName,
             new Plugin(this, options));
         }
      });
    }
})(jQuery, window, document);

Сниппет галереи статей #5

HTML:

<div class="container">
  <div class="row row-margin-bottom">
    <div class="col-md-6">
      <div class="lib-panel">
        <div class="row box-shadow">
          <div class="col-md-6">
            <img class="lib-img-show"
 src="http://itchief.ru/assets/demo/image/image1-400-400.jpg">
          </div>
          <div class="col-md-6">
            <div class="lib-row lib-header">
              <a href="#">Lorem ipsum</a>
              <div class="lib-header-seperator"></div>
            </div>
            <div class="lib-row lib-desc">
              <p><span class="glyphicon glyphicon-calendar" aria-hidden="true">
 </span>11.01.2015</p>
              <p>Omnis voluptas assumenda est, omnis voluptas nulla vero eos et expedita.
 Nulla vero eos et molestiae consequatur, vel eum iure reprehenderit.
 Quisquam est, omnis voluptas nulla vero eos et molestiae.
 Quibusdam et iusto odio dignissimos ducimus, qui perspiciatis.</p>
              <p><span class="glyphicon glyphicon-eye-open" aria-hidden="true">
 </span> 315 | <span class=" glyphicon glyphicon-comment" aria-hidden="true">
 </span> 7 | <span class="glyphicon glyphicon-star" aria-hidden="true">
 </span> 1 | <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true">
 </span> +8 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true">
 </span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="lib-panel">
        <div class="row box-shadow">
          <div class="col-md-6">
            <img class="lib-img-show"
 src="http://itchief.ru/assets/demo/image/image2-400-400.jpg">
          </div>
          <div class="col-md-6">
            <div class="lib-row lib-header">
              <a href="#">Lorem ipsum</a>
              <div class="lib-header-seperator"></div>
            </div>
            <div class="lib-row lib-desc">
              <p><span class="glyphicon glyphicon-calendar" aria-hidden="true">
 </span> 12.04.2015</p>
              <p>Omnis voluptas assumenda est, omnis voluptas nulla vero eos et expedita.
 Nulla vero eos et molestiae consequatur, vel eum iure reprehenderit.
 Quisquam est, omnis voluptas nulla vero eos et molestiae.
 Quibusdam et iusto odio dignissimos ducimus, qui perspiciatis.</p>
              <p><span class="glyphicon glyphicon-eye-open" aria-hidden="true">
 </span> 512 | <span class=" glyphicon glyphicon-comment" aria-hidden="true">
 </span> 8 | <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
 3 | <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true">
 </span> +1 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true">
 </span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="clearfix visible-md-block"></div>
    <div class="col-md-6">
      <div class="lib-panel">
        <div class="row box-shadow">
          <div class="col-md-6">
            <img class="lib-img-show"
 src="http://itchief.ru/assets/demo/image/image3-400-400.jpg">
          </div>
          <div class="col-md-6">
            <div class="lib-row lib-header">
              <a href="#">Lorem ipsum</a>
              <div class="lib-header-seperator"></div>
            </div>
            <div class="lib-row lib-desc">
              <p><span class="glyphicon glyphicon-calendar" aria-hidden="true">
 </span> 13.06.2015</p>
              <p>Omnis voluptas assumenda est, omnis voluptas nulla vero
 eos et expedita. Nulla vero eos et molestiae consequatur,
 vel eum iure reprehenderit. Quisquam est, omnis voluptas
 nulla vero eos et molestiae. Quibusdam et iusto odio dignissimos
 ducimus, qui perspiciatis.</p>
              <p><span class="glyphicon glyphicon-eye-open" aria-hidden="true">
 </span> 765 | <span class=" glyphicon glyphicon-comment" aria-hidden="true">
 </span> 9 | <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
  4 | <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
 +5 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true">
 </span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="lib-panel">
        <div class="row box-shadow">
          <div class="col-md-6">
            <img class="lib-img-show"
 src="http://itchief.ru/assets/demo/image/image4-400-400.jpg">
          </div>
          <div class="col-md-6">
            <div class="lib-row lib-header">
              <a href="#">Lorem ipsum</a>
              <div class="lib-header-seperator"></div>
            </div>
            <div class="lib-row lib-desc">
              <p><span class="glyphicon glyphicon-calendar" aria-hidden="true">
 </span> 15.07.2015</p>
              <p>Omnis voluptas assumenda est, omnis voluptas nulla
 vero eos et expedita. Nulla vero eos et molestiae consequatur,
 vel eum iure reprehenderit. Quisquam est, omnis voluptas nulla
 vero eos et molestiae. Quibusdam et iusto odio dignissimos ducimus, qui perspiciatis.</p>
              <p><span class="glyphicon glyphicon-eye-open" aria-hidden="true">
 </span> 365 | <span class=" glyphicon glyphicon-comment" aria-hidden="true">
 </span> 5 | <span class="glyphicon glyphicon-star" aria-hidden="true">
 </span> 2 | <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true">
 </span> +5 <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true">
 </span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

body {
  font-family: 'Open Sans', sans-serif;
  background-color: #f7f7f7;
}
.lib-panel {
  margin-bottom: 20px;
  padding: 0 20px 0 20px;
}
.lib-panel img {
  width: 100%;
  background-color: transparent;
}
.lib-panel .row,
.lib-panel .col-md-6 {
  padding: 0;
  background-color: #FFFFFF;
}
.lib-panel .lib-row {
  padding: 0 20px 0 20px;
}
.lib-panel .lib-row.lib-header {
  background-color: #FFFFFF;
  font-size: 20px;
  padding: 10px 20px 0 20px;
}
.lib-panel .lib-row.lib-header .lib-header-seperator {
  height: 2px;
  width: 26px;
  background-color: #d9d9d9;
  margin: 7px 0 7px 0;
}
.lib-panel .lib-row.lib-desc {
  position: relative;
  display: block;
  font-size: 13px;
}
.lib-panel .lib-row.lib-desc a{
  position: absolute;
  width: 100%;
  bottom: 10px;
  left: 20px;
}
.row-margin-bottom {
  margin-bottom: 20px;
}
.box-shadow {
  -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.10);
  box-shadow: 0 0 10px 0 rgba(0,0,0,.10);
}