可以仅使用Bootstrap创建类似Pinterest风格的布局吗？

Question

可以仅使用Bootstrap创建类似Pinterest风格的布局吗？

layouttwitter-bootstrapgridjquery-masonry

64

我已经花了很长时间来理解这个问题：

是否可能仅使用Twitter Bootstrap创建Pinterest布局？我知道有像Masonry这样的jQuery插件，但是难道没有其他方法吗？

谢谢

- Matt

2

瀑布流布局插件Masonry或其更強大的姐妹Isotope有什麼問題嗎？人們可以輕鬆地實現它，例如http://mpezzi.github.com/bootstrap_isotope/ 或 http://www.maurizioconventi.com/2012/06/19/responsive-example-integrating-twitter-bootstrap-and-jquery-masonry/ 或 http://pknopf.com/blog/jquery-isotope-with-responsive-twitter-bootstrap。 - Systembolaget

1

需要注意的是：任何纯CSS解决方案（截至2016年）都会从上到下布置项目，而不是从左到右。Pinterest布局将最新的项目显示在顶部，即从左到右，这不能通过纯CSS实现。 - Mark E. Haase

9个回答

19

我发现了这个解决方案，适用于bootstrap（即使没有定义列大小也可以使用），不需要JavaScript - 我将它应用到了一个项目中，它运行得非常好:

http://www.bootply.com/118335

感谢@katiejones!

- Christopher G

一个华丽的解决方案。但它不是跨浏览器兼容的。 - MastaBaba

IE的解决方案是什么？ - marifrahman

这是一个令人敬畏的答案。我给你点赞。 - Kingshuk Deb

也适用于Edge浏览器 - Cedric Ipkiss

14

编辑：这个在Bootstrap 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>

- Sabba Keynejad

你在在线面试测试中帮了我大忙。非常感谢！ - Mina Soleimanzadeh

10

可以实现，但有一些限制。

原理

每个列都是一个 div（或者根据你的布局意义可能是 section）
在每个列中，每个方块也可以是一个 div，或者根据设计选择 img等等。

实践

要创建列，可以使用以下各种技术：

float 浮动列
display: inline-block 行内块列
使用新的 flexible box API（非标准实现正在逐渐普及到现代浏览器）
使用新的 grid positioning API（尽管我目前会避免使用它，因为几乎没有平台支持）

然后在每个列中放置各种瓷砖（div）。同样，根据你的设计/布局，你可以用列表瓷砖（lis）替换列-divs。

限制

调整Pinterest页面大小会保持大多数元素的一般位置，即某个列顶部的元素通常会保持在靠近顶部的位置，即使调整了浏览器宽度的列数 - 纯CSS解决方案默认情况下无法做到这一点。

解决办法

虽然不是完美的解决方案，但可以使用媒体查询来影响各种元素的位置。

经过一些时间，可以接近Pinterest布局-也就是说，他们选择使用JavaScript来实现该布局可能有一个很好的理由。

- Matt

听起来很费劲。经过一番研究，我认为JS解决方案是正确的选择... - Matt

尽管这个解决方案仍然不可行，因为它仍然缺乏浏览器支持 - 即使是在你的回答一年多之后 - 但这正是我想知道的，但没有人谈论它。真的很高兴了解到有关弹性盒子API和CSS网格的信息。感谢您的回答。 - Hamid Sarfraz

8

我知道我的回答有点晚了，但是我想更新一下这个常见问题。我发现了三个最新的实现：

isotope。我在Bootstrap网站上发现了这个实现。它可以与infinite-scroll很好地配合使用，以构建无限滚动的网页。
Salvattore。这是通过纯CSS和JS实现的。JS仅用于获取数据。
masonry.desandro.com。这是一个JS密集型实现，但它具有自己的特点。

- Jeyara

5

自从Bootstrap 4推出以来，.card-columns类可用。规范在此处的文档中。它可以创建一个漂亮的类似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; }
}

- Tristan Bochu

4

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

但实际上，这个插件并不需要依赖于Bootstrap。它取决于你是否想要使用Bootstrap作为你的钉子标记，或者自己进行样式设计。

- Liber

0

<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>

- Priyanshu Kumar

-24

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

- Rakesh

2

这与使用跨浏览器工具如Bootstrap的目的相矛盾，而用户也没有说明他是否可以访问服务器端脚本。 - sws

我不明白我的解决方案如何与Bootstrap的目的相矛盾。我在其中使用了Bootstrap列类。我已经在我的一个项目中使用了这个相同的代码，它完全正常工作。当你询问关于实现像Bootstrap这样的免费框架的问题时，在99％的情况下，“理所当然”认为该人拥有服务器访问权限。 - Rakesh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bernardo Siu · Accepted Answer

在 http://bragthemes.com/demo/pinstrap/ 找到一个（免费）模板。据说它应该有你所需要的一切。虽然还没有时间去验证。

编辑 2016-03-15: Bootstrap 4 在这里内置实现了此功能。尽管仍处于 alpha 版本，但我们正在逐步完善。