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

您可以使用以下内容进行包装：

$(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 2

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 3

Bind an event handler to the "resize" JavaScript event

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

Answer 4

您可以使用.resize()

.resize（） - 将事件处理程序绑定到“调整大小”

$(window ).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);
    });
});

Answer 5

您好，试试这个

 $(document).ready(function(){
   $(window).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);
    });
});
});

谢谢，

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

5 个答案: