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并调整其大小。使用resize而不是orientationchange。根本不使用jquery。我没有想法。先感谢您！

Answer 1

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

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

在方向改变时，div的jQuery height（）不正确

1 个答案: