是否有可能使用Bootstrap创build一个pinterest般的布局?

我正试图让我的头在这个相当长一段时间现在:

只有Twitter Bootstrap才能创build一个精简的布局? 我知道有像砌体这样的jQuery插件,但没有它们,没有办法吗?

谢谢

find一个(免费)模板在http://bragthemes.com/demo/pinstrap/ 。 这应该是你所要求的。 虽然没有时间检查出来。

编辑2016-03-15 :Bootstrap 4允许这里开箱。 这仍然是阿尔法,但我们到达那里。

发现这个解决scheme,在bootstrap内工作(即使没有定义列大小的作品),不需要JavaScript – 我把它捕捉到一个项目,它的工作原理:

http://www.bootply.com/118335

祝福你@katiejones !

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

原理

  • 每一列都是一个div (或者根据你的布局的含义而定的部分)
  • 在每个栏中,每个瓷砖也是一个div ,或者img等,这取决于你的devise。

实践

为了使列可以使用以下各种技术:

  • float
  • display: inline-block的列
  • 使用新的灵活盒API (非标准的实现正在蔓延到现代浏览器)
  • 使用新的网格定位API (尽pipe我现在要避免这一点,因为它几乎不被支持)

然后在各列中放置各种图块( div )。 再次,根据您的devise/布局,您可以用ul s来replacecolumn-div,并且有一个tile列表( li s)。 我不能说你的devise在语义上是否正确。

限制

  • 调整Pinterest页面的大小保持了大多数元素的一般位置,即,即使在列的数量根据浏览器宽度进行调整时,列顶部的元素通常仍然靠近顶部, 纯CSS解决scheme不会在盒子

变通

  • 虽然不是一个完美的解决scheme,但您可以使用媒体查询来影响各种元素的位置。

有一段时间,人们可以非常接近Pinterest的布局 – 也就是说,他们select用JavaScript实现布局可能是一个很好的理由。

我知道我的回答迟到了。 但只是想要这个常见的问题是过时的。 我find了3个最新的实现。

  • 同位素 。 在bootstrap网站上find这个。 与无限滚动运行良好,以build立无限的滚动网页。
  • Salvattore 。 这是用纯CSS和JS实现的。 JS只是用来拉数据。
  • masonry.desandro.com 。 这是一个JS密集型的实现。 但它有自己的特点。

编辑:这是现在开箱即用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> 

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

但事实上,这个插件不需要引导,因为它是依赖关系。 这取决于你是否想使用引导作为你的引脚的标记或只是自己的样式。

对于不想跨浏览器兼容性的人来说,这是一个PHP解决scheme。 假设你有一个数组中的数据,

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