同宽瀑布流的生产

`一、对于同宽度的瀑布流而言, 第一排的图片是没有设置的, 但是对于以下的图片都应该是放在哪个图片的高度低的下边来去对接！

`
首先设置布局跟样式：

<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>

完成瀑布流！！！