element with the max height from a set of elements

by Andrew Maestro

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul id="list-lines">
    <li>
        <img src="images/myimage.jpg" alt="" />
        <br /> Line 1
        <br /> Line 2
    </li>
    <li>
        <img src="images/myimage.jpg" alt="" />
        <br /> Line 1
        <br /> Line 2
        <br /> Line 3
        <br /> Line 4
    </li>
    <li>
        <img src="images/myimage.jpg" alt="" />
        <br /> Line 1
    </li>
    <li>
        <img src="images/myimage.jpg" alt="" />
        <br /> Line 1
        <br /> Line 2
    </li>
</ul>

CSS

#list-lines {
    margin: 0;
    padding: 0;
}

#list-lines li {
    float: left;
    width: 33.3334%;
    display: table;
    /*<--clear bug width size containers*/
    box-sizing: border-box;
}

#list-lines li img {
    width: 100%;
    height: auto;
}

#list-lines::after {
    content: "";
    display: block;
    clear: both;
    overflow: hidden;
}

JavaScript

function setHeight(sel) {
    var max = 0;
    sel.each(function() {
        var h = $(this).height();
        max = Math.max(max, h);
    }).height('').height(max);
}

$(document).ready(function() {
    $('#list-lines').each(function() {
        $(window).on('ready load resize', setHeight($('li', this)));
    });
});