使用Bootstrap创建类似Pinterest的网格：框不会显示在彼此正下方

Question

HTML方案如下：

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

.item CSS样式：

float: left;

结果：

但白盒子不是一个接一个地对齐 - 这可能是问题所在？我尝试过使用display: inline-block;代替float: left;，但结果基本相同。

谢谢

Answer 1

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

http://www.bootply.com/118335

Answer 2

我遇到了完全相同的问题，我发现这个问题适合我。

https://github.com/kudago/waterfall

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

我发现的唯一故障是有时物品可能会垂直重叠，只要你继续向下滚动它们就会正确放置。我不确定为什么会这样，有点烦人，但直到找到更好的东西。

希望这有帮助。