Question

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

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

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

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

在此页面中可以看到真实的例子：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

通常，除非加载了所有图像，否则内容将无法达到正确的大小。如果您注意到，当缓存图像时，将不会再现该错误。这个问题有很多解决方案。

您可以设置LOGON32_LOGON_NEW_CREDENTIALS大约一秒钟并刷新高度。
您可以在每张图片上添加timeout，并在加载完毕后刷新高度。
您可以设置图像宽度和高度属性服务器端，这样即使未加载图像，load listener标记也会占用适当的空间。
在img或其父级设置固定高度。

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

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

1 个答案: