To align the height of the trumbnail and its contents, the following script is implemented:

 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()) }) })

Figure 1 shows how it should be (it is at boot). picture 1

When the window is can_resize class (see Figure 2)

enter image description here

Can someone tell trumbnail how in such cases correctly implement the algorithm for fixing the size of the trumbnail class with the text position changing. It can help refactor the existing algorithm. Thank.

    1 answer 1

    When you set the height of your elements, it is written in the style of each element. After resizing the window, jquery reads the height from the style you specified last time and re-exposes it. For this reason, nothing changes.

    Note: if you use bootstrap, then the grid size changes only when the window is resized between specific values ​​(see the grid system section ), so to save time on calculations, you can run a script only when the container width is actually changed.