div的jQuery高度（）在方向更改时不正确

Posted 2023-03-06

【中文标题】div的jQuery高度（）在方向更改时不正确

【英文标题】：jQuery height() of div incorrect on orientation change

【发布时间】：2015-03-21 14:38:34

【问题描述】：

在用户设备的方向改变后，我想根据这些 div 内调整大小的元素的大小来更改一些 div 元素的高度。基本上它是图像和文章标题的响应列表。页面首次加载时高度是正确的，但是我在方向更改时抓取的高度不正确。在过去的一天里，我一直在为此苦苦挣扎。任何想法将不胜感激。

html

<div id="mn_category_list_container">
<div class="mn_category_post mn_post_1" style="height: 283px;">
    <li>
        <a href="#" class="ui-link" data-ajax="false">
            <img class="mn_img" src="http://baconmockup.com//144/128">
            <h2>Title 1</h2>
        </a>
    </li>
</div>
<div class="mn_category_post mn_post_2 right_post" style="height: 283px;">
    <li>
        <a href="#" class="ui-link" data-ajax="false">
            <img class="mn_img" src="http://baconmockup.com//144/128">
            <h2>Title 2</h2>
        </a>
    </li>
</div>
<div class="mn_category_post mn_post_3" style="height: 283px;">
    <li>
        <a href="#" class="ui-link" data-ajax="false">
            <img class="mn_img" src="http://baconmockup.com//144/128">
            <h2>Title 3</h2>
        </a>
    </li>
</div>
<div class="mn_category_post mn_post_4 right_post" style="height: 283px;">
    <li>
        <a href="#" class="ui-link" data-ajax="false">
            <img class="mn_img" src="http://baconmockup.com//144/128">
            <h2>Title 4</h2>
        </a>
    </li>
</div>

scss

#mn_category_list_container 
  @include cf;
  .mn_category_post 
    float:left;
    width: 48%;
    margin-bottom: 23px;
    li 
      list-style-type: none;
      a 
        text-decoration: none;
        img 
          margin-bottom: 5px;
        
      
    
  
  .right_post 
    float: right;
    width: 48%;
  

js（注意我使用的是 jQuery mobile，我不得不禁用其中的一些东西，比如我没有使用的 ajax 链接，所以我把它放在代码中，不太相关）

var MN = MN || ; 

(function($) 

// MOBILE SPECIFIC FUNCTIONS
MN.MOBILE = 

    // Assigns heights to lis so rows (2 posts per) are even heights
    catPostHeighterer: function() 
        elementHeights = $('.mn_category_post li').map(function() 
            return $(this).outerHeight();
        ).get();

        maxHeight_row1 = Math.max(elementHeights.slice(0,1), elementHeights.slice(1,2));
        maxHeight_row2 = Math.max(elementHeights.slice(2,3), elementHeights.slice(3,4));

        $('.mn_post_1, .mn_post_2').css('height', maxHeight_row1);
        $('.mn_post_3, .mn_post_4').css('height', maxHeight_row2);
    ,

    imageResizerer: function() 
        viewport = updateViewportDimensions();
        img_width = $('.mn_category_post').width(); // width based on the width of is css class, which is defined in code as % of window width
        img_height = Math.round(img_width * .89);  // ratio of width to height based on designs
        $(".mn_img").attr('src', "http://baconmockup.com//" + img_width + "/" + img_height);
    ,

    init: function() 

        MN.MOBILE.imageResizerer();
        $(window).load(function() 
            MN.MOBILE.catPostHeighterer();
        );

        $(window).on("orientationchange",function()
            MN.MOBILE.imageResizerer();
            MN.MOBILE.catPostHeighterer();
        );

        // disable jQuery Mobile's ajax stuff
        $('a').attr('data-ajax','false');

        $(document).bind("mobileinit", function()
            //apply overrides here
            $.mobile.loadingMessage = false;
        );
    


)(jQuery);

jQuery(document).ready(function($) 

    if (viewport.width <= 783) 

        MN.MOBILE.init();

    

);

我已经尝试过的事情 - 在我的 js 中使用 outerHeight() 而不是 height()，设置图像大小调整和类别高度大小调整的超时。抓取列表项 (mn_category_post) 的包含 div 并调整它们的大小。使用调整大小而不是方向更改。根本不使用jquery。我没主意了。先感谢您！

【参考方案1】：

好吧，我想我的问题对于互联网来说太难了。我最终只写了一个函数来计算我在窗口加载时需要的所有值，包括纵向和横向模式。然后在方向改变时，我只会抓取这些值，而不是在不断变化的 DOM 上重新计算它们。回答我自己的问题能得到什么？

--编辑-- 另外，我不得不改变 onorientationchange 来调整大小。不知道为什么它现在有效。如果您想查看我的新代码，请发布，我会发布。