如何完成Google Keep布局之类的工作

Question

在Google Keep中，他们有几列（取决于您的视口宽度）相同宽度的音符，以便它们看起来不均匀。

如何完成这样的事情？我猜测它们在某些宽度上有特定的断点，并且在考虑了填充和边距之后，它们使图像与所需的宽度匹配，并且只是让图像高度保持相同的宽高比。

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

Answer 1

更简单的解决方案可能是使用CSS列属性，这样您就可以控制断点（也是排水沟）中的列数。

另外，对我而言，如果你能在没有一堆显式容器的情况下达到同样的效果，那么你应该这样做。显然，流量可以考虑的因素可能会为您做出决定。希望这有助于增加上述答案。

＆＃13;

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这不是一个很好的例子，但你可以做的一件事是在列中使用flex-box。

.note {
  max-width: 100px;
  margin: 5px 10px;
}
div.container {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   background-color: lightgray;
}
div.column {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   background-color: lightgray;
}

<div class="container">
<div class="column">
  <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">
</div>
<div class="column">
  <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">
</div>
<div class="column">
  <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>
</div>

Answer 3

如果您只想进行小规模的轻量级实施，请使用Minigrid

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://npmcdn.com/minigrid@3.0.1/dist/minigrid.min.js"></script>

</head>
<body>
  <div class="cards">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</body>
</html>

CSS

.card {
  width: 160px;
}


/* Anything bellow here isn't necessary, it's only for the demo */

.card {
  background-color: #F25D9C ; 
}

/* Set some height to cards */
.card:nth-child(1) {
  height: 240px;
}

.card:nth-child(2) {
  height: 190px;
}

.card:nth-child(3) {
  height: 210px;
}

.card:nth-child(4) {
  height: 230px;
}

.card:nth-child(5) {
  height: 180px;
}

.card:nth-child(6) {
  height: 200px;
}

body {
  background-color: #F9F7F7;
}

.cards {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
}

使用Javascript：

(function(){
  var grid;
  function init() {
    grid = new Minigrid({
      container: '.cards',
      item: '.card',
      gutter: 12
    });
    grid.mount();
  }

  // mount
  function update() {
    grid.mount();
  }

  document.addEventListener('DOMContentLoaded', init);
  window.addEventListener('resize', update);
})();

演示：http://jsbin.com/wamele/edit?html,css,js,output

Answer 4

对于我的项目，我使用了 react-masonry-css 级联 grid layout 库，即 masonry project 的分支。您可以在几分钟内完成设置。它完美运行。

P.s. 按照指南如何使用 Google Keep library

重新创建 react-masonry-css UX