gpt4 book ai didi

javascript - 固定行高,灵活宽度,对齐图片库

转载 作者:塔克拉玛干 更新时间:2023-11-03 06:00:52 24 4
gpt4 key购买 nike

我正在制作整页、宽度灵活的图片库。

https://weknowtoomuch.com/projects/nga/projects-grid

现在,您可能开始了解我正在尝试做什么。当前状态下的页面相当不错,但图像之间的空间(行中心周围的空格)有点太大。

我实现的方式非常简单,只需通过左右交替 float 属性来分发图像。

理想情况下,我想要达到的效果应该更接近于此:

http://images.search.yahoo.com/search/images;_ylt=AwrB8p4dRulSGDgAuCeZDWNH;_ylu=X3oDMTBwazJlZjZ1BHNlYwNzdHJtBHNsawN0aXRsZQRjcG9zAzA-?p=2014+Super+Bowl+pictures&aq=Trending&sid=743e5f15-0b3b-3483-ada1-c617f8754761&spos=0&norw=1&

我尝试了一些研究,但我发现的解决方案涉及通过更改行高来调整所有图像,我试图避免这种情况。一些高大的图像可能还必须占据两行,这也可能不适用于更改行高技术。

也许我希望的是一种算法,它可以让我以最小化空白的方式分布图像,并随机化空白 block 的位置。

我在这个项目中没有使用 jQuery,但如果没有其他合理的方法,我可以做一个异常(exception)!

满足上述所有标准的完整解决方案也是自己实现算法的一个很好的替代方案,以防您在这方面有提示...

最后一点:图像的一些最小水平裁剪也是可以接受的。

希望获得一些提示、线索和其他有用的反馈,并且这有时会对其他人有所帮助。

最佳答案

奇怪的是,昨天有人问了类似的问题。在我的 answer我已经提出了一个布局引擎的草案,它可以调整每列的高度以实现平铺效果。

您不想调整高度,但可以更改机制以满足您的需要。如果您不更新高度,您可以通过在照片之间的间隙之间分配剩余空间来实现对齐。这会产生非常大的间隙,看起来不太好。或者,您可以通过使行居中来实现更紧凑的外观,但代价是边距参差不齐。不过,我认为这看起来更好。

我创建了一个 scrappy prototype (这在 IE 中不起作用并且有其他问题)。它以图像为中心,但您可以下载它并更改 gapcenter 参数。

我知道这不是您问题的答案,更像是一个建议。有用于将图像均匀分布在行上的装箱算法。另外,双排图的问题也没有解决。

您的照片是任意尺寸的还是使用了三到四种标准尺寸?如果是这样,可以预先计算可能的布局,然后即时应用。

关于javascript - 固定行高,灵活宽度,对齐图片库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21439804/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com