通过 ajax 容器加载的数据具有不正确的高度重叠页脚后

Question

我的 HTML 标记主要包含带有两列（内容和侧边栏）和页脚的容器。内容包含 ul.horizontal-list 和 li 元素。 Li 元素在按下加载更多按钮时通过 ajax 填充。我正在使用引导程序，在 Chrome、Win7 上进行测试。 我有两个相关的问题/疑问。

首先：我通过 ajax 调用使用“加载更多”按钮加载数据。结果容器重叠页脚，由于某种原因容器高度没有正确改变。我无法修复它。

这是加载数据后的结果（灰色数据在页脚上方，左侧边栏的高度也没有足够的变化）。

第二：页面加载时有脚本运行。它不是我写的，在有人在下面评论之前我不知道。此脚本在加载时更改内容和侧边栏高度，它为两列设置固定高度。因此，这可能是 ajax 负载不能正确改变高度的原因。 我真的不认为在引导程序中设置相同高度的两列应该通过javascript完成。还有其他非javascript解决方案，为什么这里使用javascript解决方案？

可以在此页面中看到真实示例：http://moneyti.co/（如果您向下滚动并按加载更多按钮）。

似乎为 .equalcol 类的列设置固定高度的 Javascript 代码。

/**
 * Javascript-Equal-Height-Responsive-Rows
 * https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows
 */
(function(jQuery) {
    jQuery.fn.equalHeight = function() {
        var heights = [];
        jQuery.each(this, function(i, element) {
            jQueryelement = jQuery(element);
            var element_height;
            var includePadding = (jQueryelement.css('box-sizing') == 'border-box') || (jQueryelement.css('-moz-box-sizing') == 'border-box');
            if (includePadding) {
                element_height = jQueryelement.innerHeight();
            } else {
                element_height = jQueryelement.height();
            }
            heights.push(element_height);
        });
        this.height(Math.max.apply(window, heights));
        return this;
    };
    jQuery.fn.equalHeightGrid = function(columns) {
        var jQuerytiles = this;
        jQuerytiles.css('height', 'auto');
        for (var i = 0; i < jQuerytiles.length; i++) {
            if (i % columns === 0) {
                var row = jQuery(jQuerytiles[i]);
                for (var n = 1; n < columns; n++) {
                    row = row.add(jQuerytiles[i + n]);
                }
                row.equalHeight();
            }
        }
        return this;
    };
    jQuery.fn.detectGridColumns = function() {
        var offset = 0,
            cols = 0;
        this.each(function(i, elem) {
            var elem_offset = jQuery(elem).offset().top;
            if (offset === 0 || elem_offset == offset) {
                cols++;
                offset = elem_offset;
            } else {
                return false;
            }
        });
        return cols;
    };
    jQuery.fn.responsiveEqualHeightGrid = function() {
        var _this = this;

        function syncHeights() {
            var cols = _this.detectGridColumns();
            _this.equalHeightGrid(cols);
        }
        jQuery(window).bind('resize load', syncHeights);
        syncHeights();
        return this;
    };
})(jQuery);

jQuery(function(jQuery) {
    jQuery('.equalcol').responsiveEqualHeightGrid();
});

主要 HTML 标记：

 <div class="contents">
        <!-- Content Column Start -->
        <div class="custom-container front-container">
            <div class="row">

                <div class="front-page col-lg-9 col-md-12 col-sm-12 col-xs-12 equalcol conentsection">
                    <div id="pl-343">                        
                        <div class="panel-grid" id="pg-343-5">
                            <div class="panel-grid-cell" id="pgc-343-5-0">
                                <ul class="horizontal-list">
                                    <li class="post-2978 vmgallery type-vmgallery status-publish format-standard has-post-thumbnail hentry gallery_categories-dazadi-un-episki">
                                        <div class="col-md-7 col-sm-7 col-xs-7 horizontal-list-media">

                                        </div>
                                        <div class="col-md-5 col-sm-5 col-xs-5 info">

                                        </div>
                                        <div class="clearfix"></div>
                                    </li>
                                     ...
                                </ul>
                                <div class="loader" style="display: none;">
                                </div><button id="load_more_mix_homepage">Load more</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Dark Sidebar Start -->
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 equalcol blacksidebar">
                    ...
                   <div class="clearfix"></div>
                </div>
                <!-- Dark Sidebar End -->
            </div>
        </div>

    </div>
    <!-- Contents End -->
    <!-- Footer Start -->
    <footer class="style1">
        <div class="custom-container">

            <div class="row footerwidgets">               
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">

                </div>
                <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">                    
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-lg-10 col-md-10 col-sm-9 .col-xs-9">                    
                </div>
                <div class="col-lg-2 col-md-2 col-sm-3 .col-xs-3">                    
                </div>
            </div>
        </div>
    </footer>

Answer 1

除非所有图片都加载完毕，否则内容通常不会达到适当的大小。如果您注意到，当图像被缓存时，该错误将不会被复制。这个问题有很多解决方案。

• 您可以设置timeout 大约一秒钟并刷新高度。
• 您可以在每张图片上添加load listener，并在它们全部加载后刷新高度。
• 您可以在服务器端设置图像的宽度和高度属性，这样img 标签即使没有加载图像也会占据适当的空间。
• 在img 或其父对象上设置固定高度。

在我看来，第一种方法最简单也更安全。