我不确定这个技术叫什么，所以这个帖子的标题可能是错误的。
可以在这里看到我正在谈论的一个完美示例:http://designunitjournal.tumblr.com/
我想有一些算法可以计算出每张图片应该有的位置，并使其适合。
到目前为止，我只是复制了我所指的博客，可以在这里看到:
在这里:
HTML:
<body>
<div id="content">
<div class="box">
<img src="http://24.media.tumblr.com/8d63dca97b6a44757b6ea53fd0b9b394/tumblr_mpo9rzUkfE1qzgzyuo1_500.jpg">
</div>
<div class="box">
<img src="http://25.media.tumblr.com/6b5d13fd007284d82356467dfe614d7f/tumblr_mx8mmrzA2Z1sus27uo1_500.jpg">
</div>
<div class="box">
<img src="http://24.media.tumblr.com/a76eb60aea322fa4d5f97315ac50705b/tumblr_mfer9k8llm1rzg8gso1_500.jpg">
</div>
<div class="box">
<img src="http://24.media.tumblr.com/03a917bc59c9f311fee125fa8f2d5def/tumblr_mx37oyJlxM1rb8i4no1_500.jpg">
</div>
<div class="box">
<img src="http://24.media.tumblr.com/16dfda5931bd241038a61f8a48c811ea/tumblr_mwgglh2EiF1r6ky2bo1_500.jpg">
</div>
<div class="box">
<img src="http://24.media.tumblr.com/a3fd48077d16fc09a459720ff315e5f9/tumblr_mw3gnhQeIF1qc6bmco1_500.jpg/>
</div>
</div>
</body>
CSS:
.box img {
max-width: 100%;
border: 0px;
-webkit-transition-duration: 0.5s;
opacity: 1;
}
.box {
width: 290px;
margin-left: 20px;
margin-left: 20px;
float: left;
margin-bottom: 45px;
margin-bottom: 45px;
position: relative;
}
如果我想要每行三张图片，我将如何(自动)删除行之间的空间？
请看下图中的红色箭头。我希望图像上升到有可用空间的地方。
最佳答案
根据您的结构要求，有多种不同的方法可以实现这种效果。然而，我会自发地简单地添加三个容器(每列一个)，带有 display: inline-block 或 float: left 和适当的宽度。然后，您只需在设置 width: 100%; 的位置用图像填充它们。
如果您想在调整窗口大小时防止列中断，我建议将列包装在单个容器宽度中 white-space: nowrap;
关于jquery - 如何使图像自动缩放而不考虑高度(就像在 tumblr 博客上一样)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20387785/