javascript - 想为 1 个全屏 div 使用纯 css 砌体网格布局

Question

我正在使用这个画廊网格布局

http://codepen.io/team/css-tricks/pen/pvamyK

html:

<section id="photos"></section>

CSS:

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

我只需要图像填充一个全屏 div 并且可以裁剪掉不会被屏幕覆盖的图像。现在的情况是，如果图像不适合屏幕，它会转到网格中的下一列，从而在每列的末尾留下大片空白。

我使用 25 张图片来填充 5 列网格，如果没有全屏 div，网格只会扩展 3 个屏幕。我只想要 1 个全屏 div，即使这意味着许多图像将不可见并且会被 chop 。

Answer 1

• 添加了 position: fixed; 到容器(所有 img 的包装器)所以你的屏幕是固定的。
• 我建议手机 View 使用较少的列(3~4)，否则你需要超过 25 张图像才能显示 1 个没有空白/空白的全屏。

function getRandomSize(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

var allImages = "";

for (var i = 0; i < 25; i++) {
  var width = getRandomSize(200, 400);
  var height = getRandomSize(200, 400);
  allImages += '<img src="https://placekitten.com/' + width + '/' + height + '" alt="pretty kitty">';
}

$('#photos').append(allImages);

#photos {
   /* Prevent vertical gaps */
   line-height: 0;
   position: fixed;
   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    5;
  -webkit-column-count: 5;
  column-count:         5;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    5;
  -webkit-column-count: 5;
  column-count:         5;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    5;
  -webkit-column-count: 5;
  column-count:         5;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    5;
  -webkit-column-count: 5;
  column-count:         5;
  }
}

body {
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="letter">
  <section id="photos"></section>
</div>