窗口调整大小时调用jQuery代码

Question

每次浏览器调整大小时，我都要调用这个代码。这样，它就可以跟上新元素的尺寸，并相应地调整尺寸。

是否可以在浏览器调整大小时将其包装在某种类型的包装器中？

我的代码是：

$(document).ready(function(){
    $(".prodbox").each(function(i){
        i++;
        $rowNumber = (Math.ceil(i/4) - 1)*4;
        $maxHeight = Math.max(
                $(".prodbox").eq($rowNumber).height(),
                $(".prodbox").eq($rowNumber+1).height(),
                $(".prodbox").eq($rowNumber+2).height(),
                $(".prodbox").eq($rowNumber+3).height()
            );
        $(this).height($maxHeight);
    });
});

Answer 1

Html

width: <span id="widthId"></span> px<br />
height: <span id="heightId"></span> px

jQuery解决方案

$('#heightId').html($(window).height());
$('#widthId').html($(window).width());
$(window).on('resize', function(){
$('#heightId').html($(window).height());
$('#widthId').html($(window).width());
});

无法给你我的css

    @media screen and (max-height: 400px)  
    {


     #heightId 
    {
    color: #fff;

     }

    }
@media screen and (max-width: 400px) 
{
    #widthId {
        color: #0f0;
    }
}

@media screen and (max-width: 400px) 
{
    body {
        background-color: Black;
        color: #fff;
    }
}

尝尝这个

Answer 2

您可以用以下内容包装它：

$(window).on("resize", function() {
  // ..
}).resize(); // Execute on load

更新的jQuery：

$(window).on("resize", function () {
    $(".prodbox").each(function(i){
        i++;
        $rowNumber = (Math.ceil(i/4) - 1)*4;
        $maxHeight = Math.max(
                $(".prodbox").eq($rowNumber).height(),
                $(".prodbox").eq($rowNumber+1).height(),
                $(".prodbox").eq($rowNumber+2).height(),
                $(".prodbox").eq($rowNumber+3).height()
            );
        $(this).height($maxHeight);
    });
}).resize();

Answer 3

将事件处理程序绑定到“调整大小”JavaScript事件

$(document).ready(function(){
    $(".prodbox")
        .resize(resizeHnadler)
        .each(resizeHnadler)
})

var resizeHnadler = function(i){
    i++;
    $rowNumber = (Math.ceil(i/4) - 1)*4;
    $maxHeight = Math.max(
        $(".prodbox").eq($rowNumber).height(),
        $(".prodbox").eq($rowNumber+1).height(),
        $(".prodbox").eq($rowNumber+2).height(),
        $(".prodbox").eq($rowNumber+3).height()
    );
    $(this).height($maxHeight);
}