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

Question

我使用 Packery 获得如下图所示的布局。我也在用 jquery 计算高 div 的高度。

第二次加载或刷新页面时一切正常。在第一次加载时，没有计算 tall 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 的大小并顺其自然，网格工作正常，但显然我不能这样做，因为它需要等于接下来两个 sibling 的高度。我究竟做错了什么？

Answer 1

在加载所有 HTML 组件之前不会计算高度。尝试在以下位置调用您的函数:

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

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