等高并排浮动DIV（jQuery）

Question

I have a really weird thing happening on a site I'm working on... can't figure out what's going on. There's definitely something funky with my javascript that's causing this, but I can't for the life of me figure it out.

Here's what's happening:

I have several rows of divs that float left take the height of their container using jQuery. The problem is, when I go to the page directly all the containers shrink down and hide part of their contents. Then, when I click the link to go to the homepage and then click the link back to the page in question, it all works properly.

See images below

Page showing up incorrectly:

---

Navigate back to homepage and then back to page in question

Page showing up correctly now:

Here's my 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)); 
    };
});

And here's my HTML and 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%;
}

I hope that makes sense... thanks in advance!

Answer 1

Here the height of the section will depend on the image height. If the height calculation logic is called on window.load() event it must work fine. Once you navigate back to homepage and then back to page in question the images are cached hence it works fine.Try this

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

The window load event is called after all the images are loaded.