如何仅使用 bootstrap 3 网格系统和 css 创建砌体效果

Posted 2023-03-05

【中文标题】如何仅使用 bootstrap 3 网格系统和 css 创建砌体效果

【英文标题】：How to create the masonry effects with just bootstrap 3 grid system and css

【发布时间】：2022-01-15 19:37:32

【问题描述】：

我的问题是我想使用 bootstrap 3 网格系统以块格式显示数据，但是我不希望从高度限制到上一行而出现的烦人的空白间隙。例如，如果我这样做：

<div class="row">
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">longer post that is going to take more height than the others</div>
    <div class="col-lg-4">post</div>
</div>
<div class="row">
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">post</div>
</div>

然后我将在两行之间留下空白，我想要实现的是砖石效果（柱子填充位于其上方柱子附近），仅使用 CSS，特别是 bootstrap 3 网格系统。即：

我知道这可以通过plugins 完成，但我想看看是否有更纯粹的（即使它必须是 hacky）解决方案。有什么想法吗？

【问题讨论】：

sickdesigner.com/masonry-css-getting-awesome-with-css3

Aibrean 建议的方式和上面的链接将框按列顺序排列，而不是按框顺序排列，Masonry 将它们放在合适的位置，虽然不是按顺序排列，但有时很接近。

@BootstrapBoogie-Christina 我喜欢那个链接，但是它并没有真正使用 bootstrap 3 网格系统，我整理了一个小提琴：jsfiddle.net/vtanz6xc/2 但是它仍然使用列系统，我想这现在必须工作。

【参考方案1】：

我们在一个网站上做了这个，我们所做的就是把网格放在垂直的行中。

例子：

<div class="row">
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
<div>

【讨论】：

“将网格垂直排列”是什么意思。 bootstrap 似乎没有 box 类，只是一个 taf 混淆

这是一个例子，不需要从字面上理解box。 “垂直行”是列，除了我不想让你想到实际使用列。你想这样做的方式是交叉的，什么时候应该向下和向上流动。您肯定需要使用 javascript 进行订购。我们在 LI 上设置了引导网格类。

是的，没错 :) JS 将不得不触发，因此排序是交叉的。每隔一个整数进入第二列，每隔三分之一进入第三列，依此类推。

好的，这就是我现在要做的事情，我今晚会坐下来尝试想出一个更好的解决方案来内嵌列，谢谢！

听起来是个好主意。当流体布局发生变化时，如何设置 JS 重新分配框？我必须根据显示为 xs、sm、md 或 lg 动态地将它们放入其中一个列中。

【参考方案2】：

在 Bootstap 中，.row 元素用于清除它包含的 div-blocks / col 的浮点数（在您的 ex.col-lg-4 中）；

所以基本上不可能让不同行中的元素彼此相邻，您必须更改标记；

另一方面，使用引导响应列系统可能有助于制作 CSS-Masonry 效果： 您可以尝试将所有想要制作砌体效果的“col-items”放在在一行上， 显示为 inline-block（可能还有其他一些小调整..）应该可以解决问题（如果您只使用 CSS 的话，这是要走的路..）；

总结 请记住，Masonry 诞生并仍然是一个 JavaScript 网格布局库，所以即使您可以使用 CSS，我建议您使用 JS。

非常感谢 Desandro 提出了这个绝妙的主意；

【参考方案3】：

在 Bootstrap 4 中，您可以使用 .card-columns，请参见此处：https://v4-alpha.getbootstrap.com/components/card/

虽然我会推荐使用isotope，因为 JS 比 CSS 提供更多的控制和更好的兼容性。

【参考方案4】：

我做了一个简单的砖石网格，它通过像这样的 css 从 DB 接收图像：

    <div class="container">
    <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12"> 
    <a href="<?php echo $src; ?>" class="fancybox" data-fancybox="group" id="<?php echo $count; ?>" rel="<?php the_ID(); ?>">
    <div class="image-gallerie">                                                        
    <img src="<?php echo $src; ?>" class="img-gallerie lazy"  id="<?php echo $count; ?>" />                                              

    </div> 
    </a>  
    </div>
    </div>

    .container 
    -moz-column-width: 35em;
    -webkit-column-width: 35em;
    -moz-column-gap: 1em;
    -webkit-column-gap:1em;  
    

    .image-gallerie 
     width:  100%; 
     
    .image-gallerie img
     width: 100%;
     height: 100%;
     margin-top: 15px;
      margin-bottom: 10px;
    

【参考方案5】：

除非您可以使用 Bootstrap 4+ 卡片列，否则您需要某种砌体布局 JavaScript 库。 DeSandro 有一个名为 Isotope 的库，或者查看这个 Masonry (https://masonry.desandro.com/) 解决方案。

<div class="row my-container">
    <div class="my-card col-lg-4">post</div>
    <div class="my-card col-lg-4">longer post that is going to take more height than the others</div>
    <div class="my-card col-lg-4">post</div>
    <div class="my-card col-lg-4">post</div>
    <div class="my-card col-lg-4">post</div>
    <div class="my-card col-lg-4">post</div>
</div>

和 JavaScript：

$(document).ready(function() 
  var $container = $('.my-container');

  $container.masonry(
    itemSelector: '.my-card',
    columnWidth: '.my-card',
    transitionDuration: 0
  );
);