如何使图像移动到可用的空白区域

Question

我正在创建一个图片库页面，但我遇到的问题是图片没有移动到可用的空白区域。下面是一个例子：

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}
body {
  width: 100%;
  height: auto;
}
div {
  width: 50%;
  margin: 0 auto;
}
img {
  float: left;
}
.lscape {
  width: 33%;
}
.port {
  width: 33%;
}

＆＃13;

<div>

  <img src="https://i.ytimg.com/vi/c7oV1T2j5mc/maxresdefault.jpg" class="lscape">
  <img src="https://i.ytimg.com/vi/c7oV1T2j5mc/maxresdefault.jpg" class="lscape">
  <img src="http://www.cat-portraits.com/Images/cat_portrait_painting_in_pastels.jpg" class="port">
  <img src="http://www.cat-portraits.com/Images/cat_portrait_painting_in_pastels.jpg" class="port">
  <img src="https://i.ytimg.com/vi/c7oV1T2j5mc/maxresdefault.jpg" class="lscape">
  <img src="https://i.ytimg.com/vi/c7oV1T2j5mc/maxresdefault.jpg" class="lscape">

</div>

＆＃13;

＆＃13;

＆＃13;

非常感谢任何帮助！

Answer 1

有两个很好的资源来解决这个问题：

1. Masonry - 一个JavaScript网格布局库。这将有助于布局。

2. Isotope - 来自同一作者，但您也可以添加过滤选项。

希望这些解决你的问题！

Answer 2

尝试“Masonry” - Dave DeSandro的JavaScript网格布局库。它就像魅力Masonry一样。