Fatal编程技术网
  • layout/
  • Layout 是否可以仅使用引导创建类似pinterest的布局？

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

layout twitter-bootstrap grid

Layout 是否可以仅使用引导创建类似pinterest的布局？,layout,twitter-bootstrap,grid,jquery-masonry,Layout,Twitter Bootstrap,Grid,Jquery Masonry,我试图让我的头围绕着这个问题已经有一段时间了： 是否可以仅使用Twitter引导创建pinterest布局？ 我知道有jQuery插件，比如Mashine，但是没有它们就没有办法了吗 谢谢是的，这是可能的，但有一些限制 原则 每列都是一个div（或部分，具体取决于布局的含义） 在每个列中，每个磁贴也可以是div，或img等，具体取决于您的设计 实践 要制作这些列，可以使用以下各种技术： float列 显示：内联块列 使用新的（非标准的实现正在悄悄进入现代浏览器） 使用新的（尽管我暂时避免使

我试图让我的头围绕着这个问题已经有一段时间了：

是否可以仅使用Twitter引导创建pinterest布局？ 我知道有jQuery插件，比如Mashine，但是没有它们就没有办法了吗

谢谢

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

原则
  • 每列都是一个
    div
    （或
    部分
    ，具体取决于布局的含义）
  • 在每个列中，每个磁贴也可以是
    div
    ，或
    img
    等，具体取决于您的设计
实践 要制作这些列，可以使用以下各种技术：

  • float
    列
  • 显示：内联块
    列
  • 使用新的（非标准的实现正在悄悄进入现代浏览器）
  • 使用新的（尽管我暂时避免使用它，因为它几乎不受支持）
然后在每列中放置各种平铺（
div
s）。同样，根据您的设计/布局，您可以将列div替换为
ul
s，并具有平铺列表（
li
s）。我不能说这在语义上是否适合您的设计

局限性
  • 调整Pinterest页面的大小可以保持大多数元素的一般位置，即列顶部的元素通常保持在顶部附近，即使根据浏览器宽度调整了列数-纯CSS解决方案无法做到这一点
变通办法
  • 虽然不是一个完美的解决方案，但可以使用来影响各种元素的位置
随着时间的推移，人们可能会非常接近Pinterest布局——也就是说，他们选择用JavaScript实现上述布局可能有一个很好的理由。

在找到了一个（免费）模板。它应该有你想要的一切。不过我还没来得及去看看

编辑2016-03-15：Bootstrap 4允许开箱即用。它仍然是alpha版本，但我们正在实现它。

对于那些不想经历跨浏览器兼容性麻烦的人，这里有一个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中工作（即使不定义列大小也可以工作），不需要javascript——我将它快速添加到一个项目中，效果非常好：

祝福你

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

  • 。在bootstrap网站上找到这个。可以很好地与构建无限滚动网页
  • 。这是通过纯CSS和JS实现的。JS仅用于提取数据
  • 。这是一个JS密集型实现。但它有自己的特点
我们有一个东西叫做：引导瀑布：

但事实上，这个插件不需要引导，因为它是依赖的。这取决于您是想使用引导作为pin的标记，还是只想自己设置样式。

编辑：这在boostrap 4中是现成的

当然可以。我花了一段时间锻炼。希望这有帮助

很抱歉代码转储，但这是显示网格工作的必要条件

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


缩略标签
Lorem ipsumLorem ipsum dolosit amet，Concertetur Adipising eli dolor sit amet，Concertetur Adipising elit

缩略标签
我爱你，我爱你，我爱你，我爱你，我爱你

缩略标签
我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我

缩略标签
我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我

缩略标签
我爱你，我爱你，我爱你，我爱你，我爱你

缩略标签
我爱你，我爱你，我爱你，我爱你，我爱你

缩略标签
我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我

缩略标签
我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我爱我