瀑布流布局(jq实现)

参考刘晓帆大神的瀑布流效果自己也写了个希望能给打算写这个效果的朋友一点点思路，也希望朋友们批评指正！

html代码：

<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="z-box">
    <ul>
        <li>
            <h3>1A</h3>
            <a>aa</a>
            <a>aa</a>
            <a>aa</a>
        </li>
        <li>
            <h3>2B</h3>
            <a>bb</a>
        </li>
        <li>
            <h3>3C</h3>
            <a>cc</a>
            <a>cc</a>
            <a>cc</a>
            <a>cc</a>
        </li>
        <li>
            <h3>4D</h3>
            <a>dd</a>
            <a>dd</a>
            <a>dd</a>
            <a>dd</a>
            <a>dd</a>
            <a>dd</a>
            <a>dd</a>
        </li>
        <li>
            <h3>5E</h3>
            <a>ee</a>
            <a>ee</a>
            <a>ee</a>
            <a>ee</a>
            <a>ee</a>
        </li>
        <li>
            <h3>6F</h3>
            <a>ff</a>
            <a>ff</a>
            <a>ff</a>
        </li>
        <li>
            <h3>7G</h3>
            <a>GG</a>
            <a>GG</a>
            <a>GG</a>
        </li>
        <li>
            <h3>8E</h3>
            <a>ee</a>
            <a>ee</a>
            <a>ee</a>
            <a>ee</a>
            <a>ee</a>
        </li>
        <li>
            <h3>9F</h3>
            <a>ff</a>
            <a>ff</a>
            <a>ff</a>
        </li>
        <li>
            <h3>10G</h3>
            <a>GG</a>
            <a>GG</a>
            <a>GG</a>
        </li>
    </ul>
</div>
</body>
</html>

View Code