div 的 jQuery 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 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。我没主意了。先感谢您!

Answer 1

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

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