Bootstrap - Примеры оформления списка статей или новостей на сайте

28.08.2021

24.9K

Содержание:

Сниппет галереи статей #1
Сниппет галереи статей #2
Сниппет галереи статей #3
Сниппет галереи статей #4
Сниппет галереи статей #5
Комментарии

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

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

Демо

JavaScript - сниппет галереи статей

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

Демо

JavaScript - сниппет галереи статей

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

Демо

JavaScript - сниппет галереи статей

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

Демо

JavaScript - сниппет галереи статей

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

Демо

JavaScript - сниппет галереи статей

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);
}

Комментарии: 14

Аноним

17.08.2016, 09:47

А как сделать количество просмотров, нужен какой то плагин?

Александр Мальцев

17.08.2016, 13:19

Количество просмотров необходимо куда-то сохранять, обычно это база данных на сервере. Работу с базой данных можно, например, осуществить с помощью php.

Аноним

17.08.2016, 16:23

А вы не можете посоветовать какой нибудь урок или статью как это сделать.Спасибо заранее.

Александр Мальцев

28.08.2016, 06:49

Тут в зависимости от того что Вы используете. Если какую-то CMS, то необходимо почитать уроки по ней. Если не используете CMS, то написать код на языке php, c# или на любом другом языке, позволяющий писать серверные сценарии. Тут одной статьи не достаточно, скорее всего Вам понадобиться изучить несколько статей. Сам алгоритм тут простой, если у Вас что-то не получится, то могу привести алгоритм на php.

Александр Мальцев

05.08.2016, 13:18

Если работает медленно, то это связано с плагином pinterest_grid,
Попробуйте закомментировать или удалить в скрипте эту строчку:

$(window).resize();

Адаптивность картинки:

img {
  display: block;
  max-width: 100%;
  height: auto;
}

Аноним

31.07.2016, 01:57

спасибо. полезно.
но помоему 4 притормаживает!
и что бы корректно работало на моб. устройствах надо добавить картинкам класс адаптивности

Аноним

23.06.2016, 15:20

Спасибо Вам.
А как сделать меньшее количество статей в строке и увеличить padding вокруг каждой статьи?

Александр Мальцев

25.06.2016, 13:18

К какой галереи хочешь сделать?

Аноним

27.06.2016, 07:01

Вот этот вариант: b3-snippet-gallery-article-4

Александр Мальцев

05.08.2016, 12:45

Увеличить отступ осуществляется с помощью CSS свойства padding в white-panel:

.white-panel {
  padding: 15px;
}

Установить количество статей в строке осуществляется с помощью параметра no_columns:

no_columns: 3

Аноним

05.08.2016, 16:57

Спасибо.

Аноним

19.11.2015, 15:45

Спасибо тебе.

Аноним

23.07.2015, 18:06

Здравствуйте, вот спасибо. У меня постоянно проблема с Bootstrap и кирпичиками как в Сниппет галереи статей #4. Не мог найти оптимальный вариант. Пробовал с mosaicflow и с masonry (тоже вариант). В идеале бы что-бы блоки смещались книзу при достижении определенной ширины.

Аноним

13.07.2015, 21:35

Спасибо большое!