`一、對于同寬度的瀑布流而言, 第一排的圖片是沒有設置的, 但是對于以下的圖片都應該是放在哪個圖片的高度低的下邊來去對接！

`
首先設置布局跟樣式：

<div id="box">
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
</div>

給div和ul以及圖片設置下樣式：
<style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        #box{
            width:90%;
            margin:20px auto;   
            overflow:hidden;
        }
        #box ul{
            list-style:none;
            float:left;
            width:24%;
            margin:5px;
        }
        #box ul img{
            width:100%;
            margin:5px;
        }
    </style>

設置完樣式后，寫JS實習瀑布流效果：

<script type="text/javascript">
    // 獲取所有的ul
      var ulArr =document.querySelectorAll("ul");
        function createImg(count){
            for (var i = 0; i < count; i++) {
                // 創建圖片和li
                var img = document.createElement("img")
                img.src = "./美女/" + i + ".jpg";
                var li  = document.createElement("li");
                li.appendChild(img);
                // 假設一個最短的ul
                var minHeightUl = ulArr[0];
                for (var j = 0; j < ulArr.length; j++) {
                    if (minHeightUl.offsetHeight >ulArr[j].offsetHeight) {
                        minHeightUl = ulArr[j]
                    }
                }
                minHeightUl.appendChild(li)
            }
        }
        // 給的圖片個數
        createImg(99);
    </script>

完成瀑布流！！！