jquery - 3 列批量图片库

Question

好吧，我确实在整个网络上进行了搜索，但没有找到我想要在我的页面上创建的内容。我想制作一个具有 3 列的画廊，宽度相同(因此调整图像大小以适应，但它们保持比例，因此它们的高度不同)。 它应该是什么样子:

XXX XXX XXX
XXX XXX 
    XXX XXX
XXX XXX XXX
XXX     XXX
XXX XXX
    XXX XXX
XXX     XXX
XXX XXX XXX
XXX XXX XXX
    XXX

希望你能想象得到。 当然重要的是，在其中所有图片(从数据库中读取)之后，列的高度应该几乎相同。

我希望有人能帮助我，在此先感谢!

Answer 1

不使用 jQuery 似乎太难了。

假设您将所有图像都放在 3 个 div 中，但在您的 native html 代码中，您只将所有图像放在第一个 div 中。

在pageload-event之后，你可以计算第一个div的高度，然后除以3得到每个div的大概高度。

然后，循环遍历第一个 div 内的图像(使用 while 循环)，将图像一张一张附加到第二个 div，直到第一个 div 的高度变得小于您计算的近似高度。

对第二个 div 做同样的事情。

毕竟你有 3 个高度几乎相同的 div。

这就是我突然想到的。我渴望看到更好的策略。