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

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'
});