Question

我正试图解决这个问题已经有一段时间了：

是否可以仅使用Twitter Bootstrap创建pinterest布局？我知道有像砌体这样的jQuery插件，但没有它们没有办法吗？

由于

Answer 1

在http://bragthemes.com/demo/pinstrap/找到（免费）模板。这应该是你要求的。但是没有时间检查出来。

编辑2016-03-15 ：Bootstrap 4允许开箱即用here。它仍处于alpha状态，但我们已经到了那里。

Answer 2

找到这个解决方案，在bootstrap中工作（即使没有定义列大小也可以工作），不需要javascript - 我将它拼接到一个项目中它运行得很漂亮：

http://www.bootply.com/118335

祝福你@katiejones！

Answer 3

编辑：现在已经开始使用了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>

Answer 4

是的，这是可能的，但有一些限制。

原理

每列都是div（或section，具体取决于您的布局含义）
根据您的设计，每个图块中的每个图块也可以是div或img等。

实践

要制作列，您可以使用以下各种技术：

float列
display: inline-block列
使用新的flexible box API（非标准实现正在逐渐渗透到现代浏览器中）
使用新的grid positioning API（虽然我现在暂时避免这种情况，因为它几乎不受支持）

然后在每列中放置各种图块（div s）。同样，根据您的设计/布局，您可以用ul替换column-div，并有一个tile列表（li s）。我不能说出你的设计在语义上是否正确。

限制

调整Pinterest页面的大小可以保持大多数元素的大致位置，即列顶部的元素通常会保持在顶部附近，即使根据浏览器宽度调整列数 - 纯CSS解决方案获胜＆＃ 39;开箱即用。

变通

虽然不是一个完美的解决方案，但您可以使用media queries来影响各种元素的位置。

有一段时间，人们可以非常接近Pinterest布局 - 也就是说，他们选择用JavaScript实现所述布局可能是一个很好的理由。

Answer 5

我知道我的回答很晚。但只是想让这个常见问题更新。我发现了3个最新的实现。

isotope。在bootstrap网站上找到了这个。适用于infinite-scroll以构建无限滚动网页。
Salvattore。这是用纯CSS和JS实现的。 JS仅用于提取数据。
masonry.desandro.com。这是一个JS密集型实现。但它有自己的特色。

Answer 6

我们有一个名为：bootstrap-waterfall的东西：
http://mystist.github.io/bootstrap-waterfall/

但事实上，这个插件不需要bootstrap作为它的依赖。它取决于你是否想要使用bootstrap作为你的pin标记，或者只是自己设置样式。

Answer 7

自引导程序4 起，.card-columns类可用。 here文档中的规范。它形成了一个很好的类似Pinterest的网格。 ?

<div class="card-columns">
 <div class="card" id="card1"></div>
 <div class="card" id="card2"></div>
 <div class="card" id="card3"></div>
 <div class="card" id="card4"></div>
 <div class="card" id="card..."></div>
</div>

但是，关于列数，我很难适应不同的屏幕尺寸。我终于设法做到了：

@media (max-width: 575.98px){ 
    .card-columns {
        column-count: 1; }
}
@media (min-width: 576px){
    .card-columns {
        column-count: 2; }
}
@media (min-width: 768px){
    .card-columns {
        column-count: 3; }
}
@media (min-width: 992px){
    .card-columns {
        column-count: 4; }
}
@media (min-width: 1200px){
    .card-columns {
        column-count: 4; }
}

Answer 8

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Answer 9

对于那些不想要经历跨浏览器兼容性麻烦的人来说，这是一个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;?>

是否可以仅使用Bootstrap创建类似pinterest的布局？

9 个答案:

原理

实践

限制

变通