html - 如何设置不同大小的图像以占据它们之间的所有空间

Question

嗨，我正在尝试创建一个照片显示，我可以在其中列出多个不同大小的图像，以使它们能够适应各种空间而不会留下空白点。可以在此站点上观察到我正在尝试实现的示例：http ://www.morgannorman.com/

这是我的 html 的预览以及我如何设置图像：

<div class="feature-list"> <div class="feat" id="one"> <img src="galleries/display/pic1.jpg"> <img src="galleries/display/pic6.jpg"> <img src="galleries/display/pic3.jpg"> <img src="galleries/display/pic4.jpg"> <img src="galleries/display/pic5.jpg"> <img src="galleries/display/pic2.jpg"> <img src="galleries/display/pic3.jpg"> <img src="galleries/display/pic4.jpg"> <img src="galleries/display/pic1.jpg"> <img src="galleries/display/pic2.jpg"> <img src="galleries/display/pic3.jpg"> <img src="galleries/display/pic4.jpg"> </div> </div>

和我的 CSS：

.feature-list {
    width: 100%;
    padding: 10% 0;
}

.feat {
    width: 100%;
    position: relative;
}

.feat img {
    width: 25%;
    float: left;
}

Answer 1

只需使用砌体插件： http ://masonry.desandro.com/

在你包含你的插件后，它就像这样

$('.feat').masonry({
  columnWidth: 200,
  itemSelector: 'img'
});