jQuery div 的 height() 在方向改变时不正确

Question

我想根据用户设备方向更改后 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 移动设备，我不得不禁用一些我没有使用的东西，比如 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()，设置图像大小调整和类别高度调整的超时。抓取包含 div 的列表项 (mn_category_post) 并调整它们的大小。使用调整大小而不是方向更改。根本不使用 jquery。我没主意了。先感谢您！

Answer 1

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

--编辑-- 另外，我不得不更改 onorientationchange 以调整大小。不知道为什么它现在有效。如果你想看我的新代码，请 post 我会 post 它。

jQuery div 的 height() 在方向改变时不正确

jQuery height() of div incorrect on orientation change

mobile

jquery

height

resize

orientation-changes