固定行高，灵活的宽度，对齐的图片库
我在一个完整的页面，灵活的宽度图片库。
https://weknowtoomuch.com/projects/nga/projects-grid
现在，您可能已经开始了解我想要做什么了。当前状态下的页面相当不错，但图像之间的空间(行中心周围的空格)有点太大了。
我实现的方法非常简单，只需通过在左和右之间交替浮动属性来分发图像。
理想情况下，我试图实现的效果应该更接近于这样：
我尝试了一些研究，但我找到的解决方案涉及到通过更改行高来拟合所有图像，这是我试图避免的。一些较高的图像可能还必须占用两行，这也可能不适用于更改行高技术。
也许，我希望的是一种算法，它可以让我以一种最小化空白的方式分发图像，并随机化空白块的位置。
我没有在这个项目中使用jQuery，但如果没有其他合理的方法，我可以做一个例外！
一个满足上述所有标准的完整解决方案也是我自己实现算法的一个很好的替代方案，如果你在这个方向上有一个建议的话……
最后一点:图像的一些最小水平裁剪也是可以接受的。
希望得到一些提示、线索和其他有用的反馈，并希望这能在某个时候帮助其他人。
回答 1
Stack Overflow用户
发布于 2014-01-29 21:47:53
奇怪的是，昨天也提出了类似的问题。在我的answer中，我提出了一个布局引擎的草稿，它可以调整每一列的高度以实现平铺效果。
您不想调整高度，但机制也许可以改变，以满足您的需要。如果不更新高度，则可以通过在照片之间的间隙中分配剩余空间来实现对齐。这可能会造成非常大的间隙，看起来不太好。或者，您可以通过将行居中来实现更紧凑的外观，但代价是具有参差不齐的边距。
我已经创建了一个scrappy prototype (它在IE中不起作用，并且有其他问题)。它使图像居中，但您可以下载它并更改gap和center参数。
我知道这不是对你问题的回答，更像是一个建议。有一些装箱算法可以将图像均匀分布在各行上。此外，双行图像的问题也没有解决。
你的照片是任意大小的，还是用三个或四个标准大小？如果是这样的话，可以预先计算可能的布局，然后动态应用。
https://stackoverflow.com/questions/21439804
复制
相似问题
固定和灵活的宽度div相邻。
固定宽度，高度灵活的css网格
具有固定宽度和灵活高度的UILabel
创建固定宽度和灵活高度的div
如何使用柔性盒使固定宽度的边栏与灵活的内容对齐
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
