由于jquery高度，包装错误地计算了位置

Question

我有一个类似下面图像的布局，我正在使用Packery来获取。我也用jquery计算高div的高度。

第二次加载或刷新页面时，一切都很好。在第一次加载时，不计算高div的高度，因此packery将我的图像放在彼此的顶部（以chrome为单位）。在firefox中，会创建一个奇怪的空白区域，并且元素位于该空间周围。我不知道如何解决这个问题。

我的JS（按建议修改）：

angular.module('BApp')
    .controller('HomeController', function($scope, $location) {
        function bannerResize() {
            var elmnt1 = $("#second").outerHeight();
            var elmnt2 = $("#third").outerHeight();
            var result = (elmnt1 + elmnt1) + 10;
            $("#tall .banner").css("height", result + 'px');
        }
        $(window).load(function(){
            bannerResize();
            var $container = $('.packery');
               $container.packery({
                "itemSelector": ".block"
            }) ;
        })
        })

和HTML：

<div class="row packery">

<div id="tall" class="block col-xs-12 tall" >
    <a href="#">
        <div class="banner">
            <img src="/images/banner/long.jpg">
            <div class="title"><h3><span>New</span></h3></div>
        </div>
    </a>
</div>
<div id="second" class="block col-xs-12">
    <a href="#">
        <div class="banner">
            <img src="/images/banner/funny.jpg">
            <div class="title">
                <h3><span>Funny Clips</span></h3>
            </div>
        </div>
    </a>
</div>
<div id="third" class="col-xs-12 block">
    <a href="#">
        <div class="banner">
            <img src="/images/banner/moviesongs.jpg">
            <div class="title">
                <h3><span>Movie Songs</span></h3>
            </div>
        </div>
    </a>
</div>
<div class="col-xs-24 block">
    <a href="#">
        <div class="banner">
            <img src="/images/banner/music.jpg">
            <div class="title">
                <h3><span>Music Videos</span></h3>
            </div>
        </div>
    </a>
</div>
<div class="col-xs-12 block">
    <a href="#">
        <div class="banner">
            <img src="/images/banner/sqr.jpg">
            <div class="title">
                <h3><span>Full Movie</span></h3>
            </div>
        </div>
    </a>
</div>
<div class="col-xs-12 block">
    <a href="#">
        <div class="banner">
            <img src="/images/banner/originals.jpg">
            <div class="title">
                <h3><span>Originals</span></h3>
            </div>
        </div>
     </a>
</div>

</div><!-- end .packery -->

我使用bootstrap作为网格并使用angular.js。如果我没有调整#tall div的大小并且让它成为现实，那么网格工作正常，但显然我不能这样做，因为它需要等于接下来的两个兄弟姐妹＆＃39;高度。我究竟做错了什么？

Answer 1

在加载所有HTML组件之前，不会计算高度。尝试调用您的函数：

$(window).load(function(){ /*code*/ });

这确保当你所有的东西都在DOM中时你抓住了高度。如果你得到了一些你不想要的捕捉动作，可以将你的主div设置为不透明度：0;然后将$（'＃main'）。css（'opacity'，1）添加到window.load函数的顶部，以便页面为空，直到完成所有数学运算。