主页 / 问题 / 558132
Accepted
romka.pm
Asked:2020-08-22 21:02:39 +0000 UTC2020-08-22 21:02:39 +0000 UTC

更改缩略图高度并对齐内容

  • 772

为了对齐高度trumbnail和内容，在其中实现了以下脚本：

function adjustThumbnailHeight() {
var heights = []
var infoblock = []

jQuery('.thumbnail').each(function() {
    heights.push( jQuery(this).height() )
})

jQuery('.can_resize').each(function() {
    infoblock.push( jQuery(this).height() )
})

var infoblockOne = infoblock.splice(0, 2)
var infoblockTwo = infoblock

var heightsOne = heights.splice(0, 2)
var heightsTwo = heights

var maxOne = Math.max.apply(null, heightsOne)
var maxTwo = Math.max.apply(null, heightsTwo)

var maxInfoOne = Math.max.apply(null, infoblockOne)
var maxInfoTwo = Math.max.apply(null, infoblockTwo)

jQuery('.thumbnail:eq('+  0 + ')').height(maxOne)
jQuery('.thumbnail:eq('+  1 + ')').height(maxOne)
jQuery('.thumbnail:eq('+  2 + ')').height(maxTwo)
jQuery('.thumbnail:eq('+  3 + ')').height(maxTwo)
jQuery('.thumbnail:eq('+  4 + ')').height(maxTwo)

jQuery('.can_resize:eq('+  0 + ')').height(maxInfoOne)
jQuery('.can_resize:eq('+  1 + ')').height(maxInfoOne)
jQuery('.can_resize:eq('+  2 + ')').height(maxInfoTwo)
jQuery('.can_resize:eq('+  3 + ')').height(maxInfoTwo)
jQuery('.can_resize:eq('+  4 + ')').height(maxInfoTwo)

 }

 jQuery(document).ready(function() {

jQuery('.thumbnail').imagesLoaded( function() {

    jQuery(window).resize(function() {
        adjustThumbnailHeight()
    })
    jQuery(document).ready(adjustThumbnailHeight())
})

})

图 1 显示了它应该如何（加载时就是这样）。 图片1

调整窗口大小时，类“浮动” can_resize（见图 2）

在此处输入图像描述

trumbnail有人能告诉我在这种情况下如何通过更改文本的位置来正确实现固定班级规模的算法吗？它可能有助于重构现有算法。谢谢你。

javascript

1 个回答

  1. Best Answer

    当你为你的元素设置高度时，它是用每个元素的样式写的。调整窗口大小后，jquery会从你上次设置的样式中读取高度，重新设置。因此，没有任何变化。

    注意：如果你使用的是引导程序，网格只会在窗口在特定值之间调整大小时调整大小（参见网格系统部分），因此为了节省计算时间，你只能在容器的宽度实际发生变化时才执行脚本。

    • 2

相关问题