html - 照片网格列布局

Question

我想用 div 制作一个网格，我想确保它们都具有相同的宽度但不同的高度。我确实希望它们换行，但不是换行，而是在第一个可用空间下。如果您需要任何解释，请告诉我!

这几乎就是这个想法:http://imgur.com/a/WmUya

或者还有这个:

]

不过我只需要一个简单的解释!谢谢!

Answer 1

纯 CSS 解决方案(没有 Javascript 的 Masonry 布局)

现在也可以使用 column-count 在没有 javascript 的情况下执行此操作(看看 this tutorial )

.masonry {
  column-count: 3;
  column-gap: 5px;
}
img {
  break-inside: avoid;
  width: 100%;
}

<div class="masonry">
  <img src="http://lorempixel.com/100/200/abstract" alt>
  <img src="http://lorempixel.com/g/100/250/abstract" alt>
  <img src="http://lorempixel.com/100/130/abstract" alt>
  <img src="http://lorempixel.com/g/100/240/abstract" alt>
  <img src="http://lorempixel.com/100/220/abstract" alt>
  <img src="http://lorempixel.com/100/180/abstract" alt>
  <img src="http://lorempixel.com/100/210/abstract" alt>
  <img src="http://lorempixel.com/g/100/170/abstract" alt>
</div>

使用Javascript

您会发现一个非常流行的旧解决方案是使用 masonry图书馆 - 见 this example .

它需要的所有代码是:

// init Masonry
var $grid = $('.grid').masonry({
  // options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry('layout');
});