How do i tile li tags regardless of their height?

Question

I am using ul li tags, and some li's have a lot of text therefore the height of that li gets larger. The display is set to inline-block so any horizontal overflow of li's it shoves them in a new row. But the new row aligns to the bottom of the tall li that was in the previous row. Im trying to get it to look like the picture I have attached.

<div class="indexBodyGraduates">
        <ul>
            <li>
                <img src="Pictures/graduate2.jpg" width="150px" height="200px" />

                <p class="graduateText"></p>
                <p class="graduateName"></p>
            </li>
            <li>
                <img src="Pictures/graduate3.jpg" width="150px" height="200px" />
                <p class="graduateText"></p>
                <p class="graduateName"></p>
            </li>
            <li>
                <img src="Pictures/graduate2.jpg" width="150px" height="200px" />
                <p class="graduateText"></p>
                <p class="graduateName"></p>
            </li>
        </ul>


    </div>


    <style>

    .indexBodyGraduates {
        position:absolute;
        top:1010px;
        height:auto;
        padding-top:30px;
        padding-bottom:30px;
        width:1390px;
        left:0px;
        background-color:#ccc;
    }

    .indexBodyGraduates ul {

    }
    .indexBodyGraduates li {
        list-style-type:none;
        display:inline-block;
        text-align:center;
        background-color: #5b5b5d;
        padding: 20px;
        color:white;
        border-radius:20px;
        margin-right:30px;
        margin-bottom:30px;

    }

    .graduateText {
        width:250px;
        text-align:left;
        padding-top:10px;
    }

    .graduateName {
        position:relative;
        font-size:13px;
        bottom:20px;
        text-align:right;
        padding-right:20px;
    }
    </style>

My goal is to tile them like this. So they just float to the tile above.