Javascript 等高并排浮动div（jQuery）

我在一个我正在工作的网站上发生了一件非常奇怪的事情。。。不知道发生了什么。我的javascript中肯定有一些古怪的东西导致了这一点，但我一辈子也弄不明白

下面是正在发生的事情：

我有几行div，它们使用jQuery向左浮动以获取容器的高度。问题是，当我直接进入页面时，所有容器都缩小并隐藏部分内容。然后，当我点击链接进入主页，然后点击链接返回相关页面时，一切正常

参见下面的图片

页面显示不正确：

---

导航回主页，然后返回相关页面

页面现在正确显示：

以下是我的javascript：

    $(document).ready(function() {
    var pageWidth = $(window).width();
    if (pageWidth >= 1048) {
       (function($) {
            $.fn.eqHeights = function() {
                var el = $(this);
                if (el.length > 0 && !el.data('eqHeights')) {
                    $(window).bind('resize.eqHeights', function() {
                        el.eqHeights();
                    });
                    el.data('eqHeights', true);
                }
                return el.each(function() {
                    var curHighest = 0;
                    $(this).children().each(function() {
                        var el = $(this),
                        elHeight = el.height('auto').height()-3;
                        if (elHeight > curHighest) {
                            curHighest = elHeight;
                        }
                    }).height(curHighest);
                });
            };
            $('.section').eqHeights();
        }(jQuery)); 
    };
});

下面是我的HTML和CSS：

<!--1 Column Photo-->
    <div class="section group content">
        <div class="col span_12_of_12">
            <img src="images/placeholder_1col.jpg" alt=""/>
        </div>
    </div>
    <!--2 Column Text Photo-->
    <div class="section group content">
        <div class="v-table col span_6_of_12">
            <div class="v-cell text-col">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis adipiscing dui, id tristique sapien. In hac habitasse platea dictumst. Nam molestie venenatis augue nec condimentum.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean eget mi id urna tincidunt rhoncus. Nam rutrum egestas neque quis semper. Vestibulum iaculis elit lacus, eget dignissim purus.</p>
            </div>
        </div>
        <div class="col span_6_of_12">
            <img src="images/placeholder_3col_1.jpg" alt=""/>
        </div>
    </div>
    <!--3 Column Photo-->
    <div class="section group content">
        <div class="col span_4_of_12">
            <img src="images/placeholder_3col_1.jpg" alt=""/>
        </div>
        <div class="col span_4_of_12">
            <img src="images/placeholder_3col_2.jpg" alt=""/>
        </div>
        <div class="col span_4_of_12">
            <img src="images/placeholder_3col_3.jpg" alt=""/>
        </div>
    </div>
    <!--2 Column Photo Text-->
    <div class="section group content">
        <div class="col span_6_of_12">
            <img src="images/placeholder_3col_1.jpg" alt=""/>
        </div>
        <div class="v-table col span_6_of_12">
            <div class="v-cell text-col">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis adipiscing dui, id tristique sapien. In hac habitasse platea dictumst. Nam molestie venenatis augue nec condimentum.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean eget mi id urna tincidunt rhoncus. Nam rutrum egestas neque quis semper. Vestibulum iaculis elit lacus, eget dignissim purus.</p>
            </div>
        </div>
    </div>
    <!--2 Column Photo Photo-->
    <div class="section group content">
        <div class="col span_6_of_12">
            <img src="images/placeholder_2col_2.jpg" alt=""/>
        </div>
        <div class="col span_6_of_12">
            <img src="images/placeholder_2col_1.jpg" alt=""/>
        </div>
    </div>
    <!--2 Column Text Text-->
    <div class="section group content">
        <div class="v-table col span_6_of_12">
            <div class="v-cell text-col">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis adipiscing dui, id tristique sapien. In hac habitasse platea dictumst. Nam molestie venenatis augue nec condimentum.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean eget mi id urna tincidunt rhoncus. Nam rutrum egestas neque quis semper. Vestibulum iaculis elit lacus, eget dignissim purus.</p>
            </div>
        </div>
        <div class="v-table col span_6_of_12">
            <div class="v-cell text-col">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis adipiscing dui, id tristique sapien. In hac habitasse platea dictumst. Nam molestie venenatis augue nec condimentum.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean eget mi id urna tincidunt rhoncus. Nam rutrum egestas neque quis semper. Vestibulum iaculis elit lacus, eget dignissim purus.</p>
            </div>
        </div>
    </div>

.section {
    width:100%;
    clear: both;
    padding: 0px;
    margin: 0px;
    overflow:hidden;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin:0;
}
.col:first-child { margin-left: 0; }

.col img{
    width:100%;
}


/*  GROUPING  */

.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}


/*  GRID OF TWELVE  */
.span_12_of_12 {
    width: 100%;
}

.span_11_of_12 {
    width: 91.66%;
}
.span_10_of_12 {
    width: 83.33%;
}

.span_9_of_12 {
    width: 75%;
}

.span_8_of_12 {
    width: 66.66%;
}

.span_7_of_12 {
    width: 58.33%;
}

.span_6_of_12 {
    width: 50%;
}

.span_5_of_12 {
    width: 41.66%;
}

.span_4_of_12 {
    width: 33.33%;
}

.span_3_of_12 {
    width: 25%;
}

.span_2_of_12 {
    width: 16.66%;
}

.span_1_of_12 {
    width: 8.333%;
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。梅塞纳斯·奎斯正在酒后驾车，我是特里斯蒂克·萨皮恩。在hac habitasse Plateum，一句名言。威尼斯人的调味品。佩伦特式的居住者morbi tristique Sentecus和netus以及malesuada以turpis egestas闻名。埃涅阿斯·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特。南吕特鲁姆埃吉斯塔斯奈克奎斯森佩尔。前庭为前庭，前庭为前庭

Lorem ipsum dolor sit amet，是一位杰出的献身者。梅塞纳斯·奎斯正在酒后驾车，我是特里斯蒂克·萨皮恩。在hac habitasse Plateum，一句名言。威尼斯人的调味品。佩伦特式的居住者morbi tristique Sentecus和netus以及malesuada以turpis egestas闻名。埃涅阿斯·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃特。南吕特鲁姆埃吉斯塔斯奈克奎斯森佩尔。前庭为前庭，前庭为前庭

Lorem ipsum dolor sit amet，是一位杰出的献身者。梅塞纳斯·奎斯正在酒后驾车，我是特里斯蒂克·萨皮恩。在hac habitasse Plateum，一句名言。威尼斯人的调味品。佩伦特式的居住者morbi tristique Sentecus和netus以及malesuada以turpis egestas闻名。埃涅阿斯·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特。南吕特鲁姆埃吉斯塔斯奈克奎斯森佩尔。前庭为前庭，前庭为前庭

Lorem ipsum dolor sit amet，是一位杰出的献身者。梅塞纳斯·奎斯正在酒后驾车，我是特里斯蒂克·萨皮恩。在hac habitasse Plateum，一句名言。威尼斯人的调味品。佩伦特式的居住者morbi tristique Sentecus和netus以及malesuada以turpis egestas闻名。埃涅阿斯·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特·埃吉特。南吕特鲁姆埃吉斯塔斯奈克奎斯森佩尔。前庭为前庭，前庭为前庭

.科{
宽度：100%；
明确：两者皆有；
填充：0px；
边际：0px；
溢出：隐藏；
}
/*列设置*/
上校{
显示：块；
浮动：左；
保证金：0；
}
.col:第一个子项{左边距：0；}
上校{
宽度：100%；
}
/*分组*/
.小组：之后{
明确：两者皆有；
}
.组{
缩放：1；/*适用于IE 6/7*/
}
/*十二格*/
.span_12_of_12{
宽度：100%；
}
.第11页，共12页{
宽度：91.66%；
}
.span_10_/u 12{
宽度：83.33%；
}
.第9页，共12页{
宽度：75%；
}
.span_8_/u 12{
宽度：66.66%；
}
.span_7_/u 12{
宽度：58.33%；
}
.span_6_/u 12{
宽度：50%；
}
.span_5_/u 12{
宽度：41.66%；
}
.span_4_/u 12{
宽度：33.33%；
}
.span_3_/u 12{
宽度：25%；
}
.span_2_/u 12{
宽度：16.66%；
}
.span_1_/u 12{
宽度：8.333%；
}

---

我希望这是有道理的。。。提前谢谢

此处，截面高度取决于图像高度。如果在window.load（）事件上调用高度计算逻辑，它必须正常工作。一旦您导航回主页，然后再导航回有问题的页面，图像将被缓存，因此工作正常。请尝试此操作

$(window).load(function(){
 $('.section').eqHeights();
});

---

加载所有图像后将调用窗口加载事件。

也共享任何工作示例。。。或者更新图片这里的小提琴更新使用karan3112的答案就是这样！非常好用，非常感谢！在我注意到的一件新事物上面添加了小提琴。。。有没有办法消除$（window.load）的“弹出”功能？由于它等待图像重新加载以指定容器div（display:table）的高度，子（display:table单元格）直到页面完成加载后才垂直对齐中间，从而导致其弹出。是否有一种方法可以预加载图像，或者至少等到启动$（window.load）后再显示整个页面？能否共享一个链接？