使用 Bootstrap 制作类似 Pinterest 的网格：这些框不会显示在彼此的正下方

Posted 2023-03-05

【中文标题】使用 Bootstrap 制作类似 Pinterest 的网格：这些框不会显示在彼此的正下方

【英文标题】：Making a Pinterest-like grid with Bootstrap: the boxes are not displayed right below each other

【发布时间】：2014-04-04 13:52:09

【问题描述】：

html 方案如下：

<div class="items">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

.itemCSS 样式：

float: left;

结果：

但是白框并没有一个接一个地对齐——问题出在哪里？我也试过用display: inline-block;代替float: left;，但结果基本一样。

谢谢

【参考方案1】：

我遇到了完全相同的问题，我发现这个对我有用。

https://github.com/kudago/waterfall

它只依赖于 js 而不是 css，尽管我仍在使用 bootstrap 进行其他样式设置。我还使用 jquery.infinitescroll.js 来动态加载项目，并且在附加项目之后，瀑布将发挥它的魔力并将所有内容放置到位。

我发现的唯一问题是有时项目可能会在垂直方向上重叠一点，只要您继续向下滚动，它们就会被正确放置。我不确定为什么会这样，有点烦人，但直到我找到更好的东西。

希望这会有所帮助。

【参考方案2】：

您可以像这样使用 CSS 3 column-width 和 column-gap..

http://www.bootply.com/118335

【讨论】：

谢谢斯凯利。这基本上是我目前正在使用的，但困扰我的是最新项目显示在第一列而不是第一行的事实，这使得它们对访问者来说不是很明显。

没有 css3 或 javascript 是不可能的。这意味着您每次都需要将元素绝对定位在页面上。不能很好地扩展:)