一排都一样高？jQuery

Question

$( window ).ready(function() {
            if ($( document ).width() > 576) {
                $('.col').each(function() {
                    var parentHeight = $(this).parent().height(); 
                    $(this).height(parentHeight);
                }); 
            }
            else {console.log("Mobile.")}
        });

这是我的密码。我有这样的html：

<div class="row">
            <div class="col col-8"><img src="assets/images/vizhanyo-erdeklodes.jpg" alt="Egy mém, ami neked nem tölt be." class="col-img"></div>
            <div class="col col-8"><img src="assets/images/mor-pluszmunka.jpg" alt="Egy mém, ami neked nem tölt be." class="col-img"></div>
            <div class="col col-8"><img src="assets/images/fizika-peldatar.jpg" alt="Egy mém, ami neked nem tölt be." class="col-img"></div>
        </div>
        <div class="row">
            <div class="col col-8"><img src="assets/images/vizhanyo-szep-almokat.jpg" alt="Egy mém, ami neked nem tölt be." class="col-img"></div>
            <div class="col col-8"><img src="assets/images/vizhanyo-art.jpg" alt="Egy mém, ami neked nem tölt be." class="col-img"></div>
            <div class="col col-8"><img src="assets/images/mor-az-on-otthonaban.jpg" alt="Egy mém, ami neked nem tölt be." class="col-img"></div>
        </div>

问题是，行的内部并不总是完美的。有时，所有的行(第一行除外)都会变得~5 5px高。为什么？您可以在www.imarkus.me/2020b检查这个bug。

Answer 1

可能是因为row高度是由内部的图像定义的，在JS启动时可能还没有加载。

对此有不同的解决办法。最容易的方法是使用https://github.com/liabru/jquery-match-height

您也可以使用flexbox：https://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback不需要JS，但并不是所有浏览器都支持此特性。

如果您想坚持您的解决方案:在div上添加一个resize侦听器，并在每次调整大小时调整高度。有点像

var setHeight = function() {
    $('.col').each(function() {
        var parentHeight = $(this).parent().height(); 
        $(this).height(parentHeight);
    });
}
setHeight(); // initial call                
$('.row, .col').on('resize', setHeight);

(未经测试)

编辑向侦听器添加了col。

Answer 2

我认为你需要增加你的图像的高度和宽度。如果您将它添加到样式表中。它将保持固定大小的图像每一次。

img{
   width: 50px;
   height: 50px  
}

如果您希望不同大小的屏幕上的图像大小不同。您可以通过使用@media标记来实现这一点。

@media screen and (min-width: 580px) {
   img{
       width: 20px;
       height: 20px  
   }
}

现在，您的高度和宽度的图像将是20 of。

Answer 3

我必须在函数之前使用setTimeout。

$( document ).ready(function() {
            setTimeout(function() {
                if ($( document ).width() > 576) {
                $('.col').each(function() {
                    var parentHeight = $(this).parent().height(); 
                    $(this).height(parentHeight);
                }); 
            }}, 400)
        });
        $(window).resize(function(){location.reload();});

在最后一行中，如果重新调整窗口大小以运行函数，则会重新加载窗口。