如何计算WordPress上所有特色缩略图高度的总和?

时间:2020-06-24 作者:PhpDoe

在存档页面中,我需要计算total height 它是许多特色缩略图的容器,知道所有特色缩略图都有different heights (但宽度相同),并且知道缩略图将显示在三列中,这意味着我必须将总和除以三。

<div class="container">
<img src="image.jpg" width="200" height="300" />
<img src="image.jpg" width="200" height="500" />
<img src="image.jpg" width="200" height="450" />
…
</div>
我认为计算它的方法是检索循环中的特征缩略图高度,然后将它们全部相加。但是,如何准确地做到这一点呢?

我的目标是创建一个图库,其中包含以三列相同大小显示的所有特色缩略图,与Flick方式类似,但垂直对齐。

也许我正在尝试重新发明轮子,有一个插件可以自动实现这一点?

1 个回复
SO网友:Ahmad Wael

我的目标是创建一个图库,其中包含以三列相同大小显示的所有特色缩略图,与Flick方式类似,但垂直对齐。

你试过了吗masonry.js? 这是一个javascript库,可以帮助您创建图库,而无需计算每个图像的高度。

如果你决定使用砖石。js,您可能需要使用images-loaded.js 以帮助砌筑。js正确处理图像尺寸。

相关推荐

是否使WordPress图库(.Gallery-Item)具有响应性?

库的短代码:[gallery link=\"file\" columns=\"5\" size=\"medium\"]我在一个网站的内页上使用了一个5列的图库,显然当该网站对移动设备甚至平板设备做出响应时,图库中的图像会保持默认的样式width: 20%; 看起来太小了。我尝试添加媒体查询样式以增加百分比宽度,但WP仍然应用列类.gallery-columns-5.理想情况下,桌面上有5列图像,平板电脑有3列,移动设备有1列。有谁知道有什么好办法吗?/ ## Gallery -----------