Is it possible to create a pinterest-like layout w

2019-06-18 07:40发布

站内文章 / 移动开发
36 0 0

我想在让我解决这个头现在相当长的一段时间：

是否有可能创建一个只Twitter的引导一个Pinterest的布局？ 我知道有jQuery插件像砌体，但有没有他们没办法？

谢谢

Answer 1:

发现在（免费）模板http://bragthemes.com/demo/pinstrap/ 。 它应该有所有你所要求的。 还没来得及检查出来，虽然。

编辑2016年3月15日 ：引导4允许这种开箱这里 。 它仍然处于alpha，但我们一定能成功。



Answer 2:

发现此解决方案，引导内作品（作品即使没有定义列的大小），并不需要JavaScript的 - 我拍下它变成一个项目，它精美的作品：

http://www.bootply.com/118335

祝福你@katiejones ！



Answer 3:

编辑：这是现在开箱的自举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的列
  • 使用新的灵活的盒子API （非标准实现被蔓延到现代浏览器）
  • 使用新的网格定位API （虽然我会避免这种情况，现在因为它不支持几乎所有）

然后将各种瓷砖（ div中的每一列S）。 同样，根据你的设计/布局，你可以替换列的div ul秒，有砖的列表（ li S）。 我不能，是否是对你的设计语义正确的说话。

限制

  • 调整的Pinterest的页面中保持大部分元素的一般位置，即在塔的顶部元件一般保持在顶部附近，即使调整了浏览器的宽度列数- 纯CSS的解决方案不会那么做出来的框 。

变通

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

随着一段时间，人们可以得到相当接近Pinterest的布局 - 即说，有可能是他们选择来实现一个很好的理由说，布局的JavaScript。



Answer 5:

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

  • 同位素 。 上引导网站上找到此。 亦可与无限滚动打造无限滚动的网页了。
  • Salvattore 。 这是achived纯CSS和JS。 JS只用于提取数据。
  • masonry.desandro.com 。 这是一个JS密集的实现。 但它有其自身的特点。


Answer 6:

在那里，我们有一个名为东东：引导瀑：
http://mystist.github.io/bootstrap-waterfall/

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



Answer 7:

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

对于大家谁不希望想通过跨浏览器兼容的麻烦，这里是一个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;?>


文章来源: Is it possible to create a pinterest-like layout with Bootstrap only?
标签： layout twitter-bootstrap grid jquery-masonry
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~