创建相互连接的图像网格答案

【问题标题】：Creating a grid of images that connect with each other创建相互连接的图像网格
【发布时间】：2013-03-14 03:27:20
【问题描述】：

我正在尝试制作一个相互连接良好的图像网格。

这是我的网格： http://www.yannickluijten.be/test2

并非每张图片都具有相同的高度，所以这就是问题所在：我希望第四张图片（灰色）出现在第一张图片（绿色）下方，我不想使用 3 列。我该怎么做？

.img1 {
    width: 300px;
    height: 200px;
    float: left;
    background: green;
}

.img2 {
    width: 300px;
    height: 400px;
    float: left;
    background: blue;
}

.img3 {
    width: 300px;
    height: 300px;
    float: left;
    background: yellow;
}

.img4 {
    width: 300px;
    height: 400px;
    float: left;
    background: gray;
}

【问题讨论】：

一旦那个蓝色盒子像那样漂浮在那里，绿色盒子下面到蓝色盒子边缘的空间就变得不可用（无法填充，除非你绝对定位在那里）。您是否考虑过使用三列布局而不是浮动的东西？
可能是这样的css-tricks.com/seamless-responsive-photo-grid？（仅适用于现代浏览器）
我真正想做的是从我的 tumblr 帐户自动加载图像并将它们放入这样的网格中。所以三列布局是不可能的，因为我只有一个我必须实现的 javascript 链接（这已经在工作，链接已更新）。如何使用绝对位置来做到这一点？
这是我想要达到的目标：socialsketch.net

标签： css grid

【解决方案1】：

使用 CSS 浮动时，无法控制可变高度浮动元素何时“环绕”到左边缘，而不会导致其中一些元素之间出现不需要的垂直间距。

像jQuery Masonry 这样的马赛克插件就是为这类事情而设计的。不确定它是否可以让您控制哪张照片出现在哪一列中，但它可以正常工作。

您可以使用CSS columns，但它对哪张照片应出现在哪一列中的控制有限，并且在 IE9 或更早版本中不起作用。

【讨论】：

【解决方案2】：

.img4 {
width: 300px;
height: 400px;
float: left;
background: gray;
clear: both;
}

第四张图片在第一行，但不正好在第一张图片下方。

【讨论】：