显示画廊项目等项目时的定位问题答案

【问题标题】：Positioning issue when display items like gallery items显示画廊项目等项目时的定位问题
【发布时间】：2017-04-13 04:09:59
【问题描述】：

我有一些数据（框）应该像画廊项目一样显示（就像在任何购物网站中一样），问题是每个框的高度由于其内容而不同，并且每行有 4 个项目（框），比如说如果第一个盒子的高度为 300 像素，所有其他盒子的高度为 250 像素，那么下一个项目从第一行最大高度的末尾开始，我不希望这样，我不想要这些空白，每个盒子下一行应显示在第一行的框下方

这是我的代码

<!DOCTYPE html>
<html>
<head>
<style> 
.flex-container {
  width: 400px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 122px;
  margin: 0 10px 10px 0;
  float: left;
  padding: 15px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2flex item 2flex item 2flex item 2</div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>

</body>
</html>

【问题讨论】：

您正在尝试实现我所知的砌体效果。自己做很复杂，但是有很好的插件。看看这个：masonry.desandro.com
这个链接在我这边不起作用:(
在没有这个插件的情况下给我一些提示
ok 链接现在可以使用，谢谢，让我试试
masonry、isotope、bootstrap-waterfall（类似 pintrest 的脚本）或 CSS 列。这是我最近回答的similar question，其中列出了您可能的选择。

标签： html css

【解决方案1】：

据我所知，您正在寻找的效果称为 Masonry 或 Pinterest 效果。 This is a good plugin for it.

这是您实施了砌体的代码：https://jsfiddle.net/jwjkt933/

用于初始化砌体的jQuery代码：

(function($) {
  $('.flex-container').masonry({
    columnWidth: 152,
    gutter: 10,
    itemSelector: '.flex-item'
  });
})(jQuery);

这个例子也需要jQuery，虽然你也可以用纯JS初始化砌体。

【讨论】：

【解决方案2】：

你可以用 flex 来做，但不能成行。您必须使用 flex-direction: column; 和 align-content 属性。检查这个小提琴。

https://jsfiddle.net/4evoq3nt/1/

【讨论】：

嗨，@Varin 我唯一的问题是高度，我不能使用高度，因为内容是动态的，我不确定高度
此解决方案水平增长。继续添加项目，您会得到一个水平滚动条而不是垂直滚动条，这不是普通用户对这种布局的期望。因此，您的解决方案不能回答问题。我怀疑您个人是否会在列中显示未知的项目流时使用它。 Flexbox 不能用于 masonry/pinterest 布局。考虑 CSS 列，但在调整大小或添加更多项目时会出现主要的内容重排问题。

【解决方案3】：

你需要为 flex-item 设置一个最小高度和一个特定的高度，这样尽管有内容，你总是会在整个 flex-container 中得到相同大小的盒子，如下所示：

<!DOCTYPE html>
<html>
<head>
<style> 
.flex-container {
  width: 400px;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  width: 122px;
  margin: 0 10px 10px 0;
  float: left;
  padding: 15px;
  height:100%;
  min-height: 75px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2flex item 2flex item 2flex item 2</div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>

</body>
</html>

请务必记下上面示例中使用的 min-height 和 height 参数

【讨论】：