由于 jquery 高度，Packery 计算错误的位置

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 -->

我正在为网格使用引导程序并使用 angular.js。如果我不调整#tall div 的大小并让它保持不变，那么网格可以正常工作，但显然我不能这样做，因为它需要等于接下来两个兄弟姐妹的高度。我究竟做错了什么？

Answer 1

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

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

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