Bootstrap 5 布局适用于不同尺寸的卡片 - 就像 Pinterest

Question

我正在构建一个使用 Bootstrap 5 的网络，该网络将有一个部分显示几张这样的卡片

如您所见，每张卡片可能有不同的尺寸（取决于描述和缩略图）

如何让它们变得紧凑，就像 Pinterest 主页一样

我需要使用什么类（在 bootstrap 5 中），或者什么布局

Answer 1

正如 Bootstrap 5 文档中所解释的，Masonry JS 插件是此类“Pinterest”布局的推荐选项。 Bootstrap 4 中使用的多列卡片布局（卡片列）在 Bootstrap 5 中不再可用。

使用 Masonry 插件很简单。只需使用适当的

col-*

 类来设置跨列数，然后使用包含的 

data-masonry

 上的 

row

 属性...

<div class="container">
    <div class="row" data-masonry='{"percentPosition": true }'>
        <div class="col-*">
            ...
        </div>
    </div>
</div>

https://codeply.com/p/yrjCBwUeKR

---

注意：其他人提到的CSS网格砌体（即：grid-template-rows: masonry;

）选项目前仅适用于Firefox，并且还不是推荐的选项。

Answer 2

不要为此使用 Bootstrap。使用 CSS 网格功能它可以帮助您完成动态内容加载时的循环，并且非常容易设置。

.grid-container {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-gap: 20px;
    text-align: center;
    margin-top: 1rem;
    grid-template-columns: repeat(3, 1fr);
}

Answer 3

#cont {
  columns:3;
  column-gap: 5px;
}
#cont>div {
  background: #c1c1ff;
  margin-bottom: 5px;
  break-inside:avoid;
}

<div id="cont">
<div style="height:30px"></div>
<div style="height:50px"></div>
<div style="height:70px"></div>
<div style="height:55px"></div>
<div style="height:90px"></div>
<div style="height:40px"></div>
<div style="height:60px"></div>
<div style="height:35px"></div>
</div>

Answer 4

如果您有一定数量的项目并且不需要无限滚动或在页面上按 A-Z 排序，则不需要外部库。

！注意：这种方法的缺点是卡片的顺序是 A-Z 从每列向下然后横向排列，而不是 A-Z 从整个页面向下排列。这意味着最后一个项目可能出现在第一行第三列中。

但是它非常简单，不需要外部库 - 如果您想使用一些数学和逻辑来找出自己的方法..就在这里。

逻辑 将所有卡片放入带有 flex-wrap 的 d-flex 列中，然后只需几行 javascript 或 jquery 即可根据卡片的总高度和宽度更改容器高度，这会导致列溢出，从而生成列不会溢出并且底部相当齐平。

逻辑示例 IE。伪代码

arrayofcards = getallelements('cards'), 
sumHeights = arrayofcards.map(arrayofcards.height),
height of container = sumHeights / numberOfDesiredColumns
width of cards = (innerWidth / numberOfDesiredColumns) - gapWidth

实际代码示例

HTML

<div class="cards-group d-flex flex-column flex-wrap">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

Jquery/Javascript

$(()=>{
   // get the card dom elements
   var cardArray = Array.from($('.cards-group').find('.card'));
   // get width of the card container / parent div
   var innerWidth = $('.cards-group').width();

   // get the cumulative height for all the cards
   var cardArrayHeight=0;
   cardArray.map((card)=>{  cardArrayHeight += $(card).height() });

   // your custom number of columns (which you could data-tag to parent div)
   let colNumber = 3  // change to suit tastes
   // your custom card gap (which you could data-tag to parent div)
   let colGap = 16 //= 1 rem default for html/body  // change to suit tastes

   // card width is the based on column numbers, less a column gap
   var cardWidth = (innerWidth / colNumber) - colGap 
   // the total cumulative height is the height of all the cards, plus all the gaps except one gap (don't include a gap at the end)
   var layoutTotalCardHeight = cardArrayHeight + ((cardArray.length-1) * colGap)
   // the container height, will be a gross down of the height to fit into the number of columns, LESS the gaps at the bottom of each folumn
   var containerHeight = (layoutTotalCardHeight / (1+ (1/colNumber))) - (colNumber * colGap)

   $('.cards-group').height(containerHeight);
   $('.cards-group').css('gap',colGap);
   $('.cards-group .card').css('width',cardWidth);

})

剥香蕉皮的方法总是不止一种。

Answer 5

您想要实现的称为 Masonry 布局。有不同的方法可以做到这一点，使用 CSS 网格、Flexbox 或 CSS 的列功能。查看 css-tricks.com 上的

此链接，了解这些方法的详细信息。