等高度並排浮動DIV（jQuery）

Question

我有一個非常奇怪的事情發生在我正在工作的網站上......無法弄清楚發生了什麼事情。這絕對是我的JavaScript引起的一些時髦，但我不能爲我的生活弄清楚。

這裏發生的事情：

我有一個浮動左採取使用jQuery其容器的高度的div的幾行。問題是，當我直接訪問頁面時，所有容器都縮小並隱藏了部分內容。然後，當我點擊鏈接進入主頁，然後點擊鏈接回到有問題的頁面時，它一切正常。

下面

頁看到的影像顯示出來錯誤：

---

導航回到問題主頁，然後返回頁面

頁正確現在顯示出來：

這裏是我的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%; 
} 

我希望是有道理的......在此先感謝！

Answer 1

此處的高度取決於圖像的高度。如果在window.load（）事件上調用高度計算邏輯，它必須正常工作。一旦你在問題導航回到主頁，然後回到頁的圖像緩存，因此它的工作原理fine.Try這個

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

窗口load事件的所有圖像加載後調用。