Возможно ли создать только компоновку pinterest с Bootstrap?

Я пытаюсь занять мою голову вокруг этого довольно долгое время:

Можно ли создать макет Pinterest с помощью Twitter-бутстрапа? Я знаю, что есть плагины jQuery, такие как масонство, но нет ли способа без них?

Спасибо

Ответ 1

Найден (бесплатный) шаблон в http://bragthemes.com/demo/pinstrap/. У него должно быть все, о чем вы просите. Однако у меня не было времени проверить это.

Изменить 2016-03-15: Bootstrap 4 позволяет это из коробки здесь. Это все еще в альфе, но мы добираемся туда.

Ответ 2

Нашел это решение, работает в бутстрапе (работает даже без определения размеров столбцов), не требует javascript - я включил его в проект и прекрасно работает:

http://www.bootply.com/118335

Благослови вас @katiejones!

Ответ 3

Да, возможно, но с некоторыми ограничениями.

Принцип

Каждый столбец является div (или section в зависимости от значения вашего макета).
В каждом столбце каждая плитка также является div или img и т.д. в зависимости от вашего дизайна.

Практика

Чтобы сделать столбцы, вы можете использовать следующие различные методы:

float столбцы
display: inline-block столбцы
Используйте новый API гибких ящиков (нестандартные реализации ползут в современных браузерах).
Использовать новый метод определения местоположения сетки (хотя я бы избегал этого пока, поскольку он почти не поддерживается)

Затем поместите различные плитки (div s) в каждом столбце. Опять же, в зависимости от вашего дизайна/макета вы можете заменить div-столбцы на ul s и иметь список плиток (li s). Я не могу говорить о том, является ли это семантически правильным для вашего дизайна.

Ограничения

Изменение размера страницы Pinterest поддерживает общее положение большинства элементов, т.е. элементы в верхней части столбца, как правило, находятся рядом с вершиной, даже когда количество столбцов настраивается для ширины браузера - чистое решение CSS, t сделать это из коробки.

обходные

Хотя это не идеальное решение, вы можете использовать медиа-запросы, чтобы влиять на положение различных элементов.

С некоторого времени можно приблизиться к макету Pinterest - это говорит о том, что, вероятно, была хорошая причина, по которой они решили реализовать упомянутый макет с помощью JavaScript.

Ответ 4

Я знаю, что мой ответ задерживается. но просто хотел, чтобы этот общий вопрос устарел. Я обнаружил 3 последних реализации.

isotope. Обнаружено это на сайте начальной загрузки. Хорошо работает с infinite-scroll для создания бесконечных веб-страниц прокрутки.
Salvattore. Это достигается с помощью чистого CSS и JS. JS используется только для вывода данных.
masonry.desandro.com. Это интенсивная реализация JS. но он имеет свои особенности.

Ответ 5

РЕДАКТИРОВАТЬ: Это теперь из коробки в boostrap 4 http://v4-alpha.getbootstrap.com/components/card/#card-columns

Конечно. Потратил меня на время. Надеюсь, это поможет!

Извинения за дамп кода, но необходимо показать работу сетки.

<head>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/masonry.js"></script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/imagesLoaded.js"></script>




<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>




</head>

  <div class="container">


        <div class="row masonry-container">

          <div class="col-xs-6 col-sm-3 col-md-3 item">
            <div class="thumbnail">
              <img src="http://lorempixel.com/150/200/abstract" alt="">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Lorem ipsumLorem ipsum dolosit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>

              </div>
            </div>
          </div><!--/.item  -->


          <div class="col-xs-6 col-sm-3 col-md-3 item">
            <div class="thumbnail">
              <img src="http://lorempixel.com/150/200/abstract" alt="">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Lorem ipsumLorem ipdolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>

              </div>
            </div>
          </div><!--/.item  -->

          <div class="col-xs-6 col-sm-3 col-md-3 item">
            <div class="thumbnail">
              <img src="http://lorempixel.com/150/200/abstract" alt="">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>

              </div>
            </div>
          </div><!--/.item  -->

          <div class="col-xs-6 col-sm-3 col-md-3 item">
            <div class="thumbnail">
              <img src="http://lorempixel.com/150/200/abstract" alt="">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>

              </div>
            </div>
          </div><!--/.item  -->

          <div class="col-xs-6 col-sm-3 col-md-3 item">
            <div class="thumbnail">
              <img src="http://lorempixel.com/150/200/abstract" alt="">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Lorem ipsumLorem ipsum dolor ctetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>

              </div>
            </div>
          </div><!--/.item  -->

             <div class="col-xs-6 col-sm-3 col-md-3 item">
            <div class="thumbnail">
              <img src="http://lorempixel.com/150/200/abstract" alt="">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Lorem ipsumLorem ipdolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>

              </div>
            </div>
          </div><!--/.item  -->

          <div class="col-xs-6 col-sm-3 col-md-3 item">
            <div class="thumbnail">
              <img src="http://lorempixel.com/150/200/abstract" alt="">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>

              </div>
            </div>
          </div><!--/.item  -->

          <div class="col-xs-6 col-sm-3 col-md-3 item">
            <div class="thumbnail">
              <img src="http://lorempixel.com/150/200/abstract" alt="">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>

              </div>
            </div>
          </div><!--/.item  -->

          <div class="col-xs-6 col-sm-3 col-md-3 item">
            <div class="thumbnail">
              <img src="http://lorempixel.com/150/200/abstract" alt="">
              <div class="caption">
                <h3>Thumbnail label</h3>
                <p>Lorem ipsumLorem ipsum dolor ctetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>

              </div>
            </div>
          </div><!--/.item  -->


        </div> <!--/.masonry-container  -->
      </div><!--/.tab-panel -->


<style type="text/css">
body {

  padding-top: 50px;
}

.main-container {
  padding: 10px 15px;
}

.p {
  text-align: center;
}



</style>


<script type="text/javascript">

/* Demo Scripts for Making Twitter Bootstrap 3 Tab Play Nicely With The Masonry Library
* on SitePoint by Maria Antonietta Perna
*/

//Initialize Masonry inside Bootstrap 3 Tab component 

(function( $ ) {

  var $container = $('.masonry-container');
  $container.imagesLoaded( function () {
    $container.masonry({
      columnWidth: '.item',
      itemSelector: '.item'
    });
  });

  //Reinitialize masonry inside each panel after the relative tab link is clicked - 
  $('a[data-toggle=tab]').each(function () {
    var $this = $(this);

    $this.on('shown.bs.tab', function () {

      $container.imagesLoaded( function () {
        $container.masonry({
          columnWidth: '.item',
          itemSelector: '.item'
        });
      });

    }); //end shown
  });  //end each

})(jQuery);


</script>

Ответ 6

У нас есть материал с именем: bootstrap-waterfall:
http://mystist.github.io/bootstrap-waterfall/

Но на самом деле, этот плагин не нуждается в бутстрапе в качестве его зависимостей. Это зависит от того, хотите ли вы использовать бутстрап в качестве ваших разметки контактов или просто сами по себе.

Ответ 7

Для всех, кто не хочет, чтобы вы столкнулись с проблемой перекрестной совместимости браузеров, вот PHP-решение. Предполагая, что у вас есть данные в массиве,

<?php $iColumns = 4;?>
<?php for($i=0; $i < $iColumns; ++$i):?>

    <div class="span3">
        <?php
        $j=$i;
        while( isset( $aData[$j] ) ):
        $oItem = $aData[$j]
        ?>
            <div class="thumbnail" style="margin-top:10px;">
                <a href="">
                    <img src="" alt=""/>
                </a>

                <h3>title</h3>
                <p>caption</p>
            </div>
        <?php
        $j=$j+$iColumns;
        endwhile;?>
    </div>
<?php endfor;?>