javascript - 如何完成类似 Google Keep 布局的操作

Question

在 Google Keep 中，它们有几列(取决于您的视口(viewport)宽度)宽度相等的注释，它们的排列使它看起来不统一。

如何才能完成这样的事情？我猜他们在某些宽度上有特定的断点，在考虑了填充和边距之后，他们使图像匹配所需的宽度，并简单地让图像高度保持相同的纵横比。

这只是我的猜测；怎么做？

Answer 1

一个更简单的解决方案可能是使用 CSS 列属性，这样您就可以控制断点(以及间距)中的列数。

此外，对我来说这似乎是一个好主意，如果您可以在没有一堆显式容器的情况下实现相同的效果，那么您应该这样做。显然，对于心流，有些事情需要考虑，这可能会为您做出决定。希望这有助于增加上述答案。

.container {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
  -webkit-column-gap: .5rem; /* Chrome, Safari, Opera */
  -moz-column-gap: .5rem; /* Firefox */
  column-gap: .5rem;

}
.note {
  width: calc(100% / 1);
}

<div class="container">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original-original.jpg">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original-original.jpg">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original-original.jpg">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original-original.jpg">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original-original.jpg">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original-original.jpg">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_iapetus_sidebyside.jpg.CROP.original-original.jpg">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_ugarkovic_saturn.jpg.CROP.original-original.jpg">
  <img class="note" src="http://www.slate.com/content/dam/slate/blogs/bad_astronomy/2014/06/Ten%20Years%20at%20Saturn/cassini_mimas.jpg.CROP.original-original.jpg">
</div>