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

问题描述 投票：26回答：3

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

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

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

javascript html css
3个回答
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
投票

这不是一个很好的例子，但你可以做的一件事就是在列中使用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>
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/[email protected]/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);
})();

但是：ぁzxswい

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.