logo标签列表

如何实现类似Google Keep的布局？

javascripthtmlcss
36
在Google Keep中，他们有一个由几列（取决于您的视口宽度）等宽笔记组成的布局，为了使其不一致。
如何实现这样的效果？我猜想他们在特定宽度上有具体的断点，并且在考虑到填充和边距后，他们将图像匹配到所需的宽度，然后简单地让图像高度保持相同的纵横比。
这只是我的猜测；那么该如何实现呢？
19
你试过使用 http://masonry.desandro.com/ 吗？ - GajendraSinghParihar
1
+1 @Champ，我也打算建议这个。它真的很好！ - Ruddy
@Champ 没有见过这个，谢谢你指出来！ - theintellects
1
这可以仅通过 CSS 完成。 - Mr. Hugo
4个回答
4

一种更加简单的解决方案可能是使用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>

2
通过这个解决方案，图片会按列垂直堆叠。通常，在这样的布局中，用户需要在第一行看到“最新消息”（可能对应于HTML中的第一个标签）。 - massic80
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>

这是一种冗余的方式，可以实现列布局的相同结果 :) - massic80
2
如果您只需要小型轻量级实现，可以使用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

0

在我的项目中，我使用了react-masonry-css瀑布流网格布局库，这是masonry project的分支。你可以在几分钟内设置它。它完美地工作。

P.s.遵循指南如何使用react-masonry-css库重新创建Google Keep UX。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接