js实现瀑布流

## 学习总结
因为项目的页面需要实现瀑布流 就去学习了一下如何实现瀑布流 瀑布流的优点是从上自下的排列 宽度固定 长度不固定 吸引用户 使用户能不停的往下滑 给人视觉上眼前一亮的感觉
代码如下：

 <!-- 父元素 -->
            <div id="nodeList" class="clearFloat">
                <!-- 子元素 -->
                <div class="nodeshow">
                    <a class="nodeShowphoto" herf="#">
                        <img class='nodephoto' src="../../static/images/meduDeatil/first.jpeg">
                    </a>
                    <div class="nodewords">
                        <a class="nodesmaTitle">
                           五一出游
                        </a>
                        <div class="noteUsershow clearFloat">
                            <a class="noteUserPhoto">
                                <img class='userphoto' src="../../static/images/meduDeatil/userPhoto.jpg">
                            </a>
                            <a class="noteUername">鹤归江野</a>
                            <div class="notelove">
                                <i class="iconfont">&#xe61f;</i>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="nodeshow">
                    <a class="nodeShowphoto" herf="#">
                        <img class='nodephoto' src="../../static/images/meduDeatil/second.jpeg">
                    </a>
                    <div class="nodewords">
                        <a class="nodesmaTitle">
                            牛筋面
                        </a>
                        <div class="noteUsershow clearFloat">
                            <a class="noteUserPhoto">
                                <img class='userphoto' src="../../static/images/meduDeatil/userPhoto2.jpg">
                            </a>
                            <a class="noteUername">k</a>
                            <div class="notelove">
                                <i class="iconfont">&#xe61f;</i>
                            </div>
                        </div>
                    </div>
                </div>
    </div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #f3f6f9;
}

.noteAll {
  width: 100%;
  height: auto;
}

.nodeCenter {
  margin: 0 auto;
  width: 800px;
}

.nodephoto {
  width: 200px;
  border-radius: 30px;
  overflow: hidden;
}

.nodeShowphoto {
  margin-left: -4px;
}

.nodeshow {
  padding: 10px;
  width: 210px;
  float: left;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  box-shadow: 1px 1px 4px #6696c5;
}

.nodewords {
  color: white;
  width: 200px;
  background-color: #a5bed6;
  border-radius: 5px;
  margin-left: -5px;
}

.nodesmaTitle {
  font-size: 14px;
  margin-left: 15px;
  margin-top: 10px;
  display: inline-block;
}

.nodesmaTitle:hover {
  cursor: pointer;
  color: rgb(185, 156, 185);
}

#nodeList {
  position: relative;
}

.clearFloat::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.noteUserPhoto {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: azure;
  display: inline-block;
  margin-top: 10px;
  overflow: hidden;
  margin-left: 8px;
}

.noteUsershow {
  width: 100%;
  position: relative;
}

.userphoto {
  width: 25px;
}

.noteUername {
  font-size: 15px;
  display: inline-block;
  position: absolute;
  top: 15px;
  left: 36px;
  transform: scale(0.7);
}

.noteUername:hover {
  cursor: pointer;
  color: thistle;
}

.notelove {
  float: right;
  top: 11px;
  right: 12px;
  position: relative;
}

.notelove:hover {
  cursor: pointer;
}

window.addEventListener("load", function () {
    nodewaterFall('nodeList', 'nodeshow', 4);
});
// 第一个值是父元素，第二个是子元素，第三个是指定多少列
// 追加数据
function newnoteWaterall(){
    let str=`
    <a class="nodeShowphoto" herf="#">
        <img class='nodephoto' src="../../static/images/meduDeatil/second.jpeg">
    </a>
    <div class="nodewords">
        <a class="nodesmaTitle">
        </a>
        <div class="noteUsershow clearFloat">
                            <a class="noteUserPhoto">
                                <img class='userphoto' src="../../static/images/meduDeatil/userPhoto2.jpg">
                            </a>
                            <a class="noteUername">鹤归江野</a>
                            <div class="notelove">
                                <i class="iconfont">&#xe61f;</i>
                            </div>
                        </div>
    </div>
`
var newnotebox=document.createElement('div')
newnotebox.className='nodeshow';
newnotebox.innerHTML=str;
document.getElementById('nodeList').appendChild(newnotebox);
nodewaterFall('nodeList', 'nodeshow', 4);
}
newnoteWaterall();
function nodewaterFall(parentEle, childEle, cols) {
    //根据图片的列数来确定父盒子的宽度，父盒子居中
    //获取标签，父盒子和所有子盒子
    var notefatherbox = document.getElementById(parentEle)
    var notesonbox = document.getElementsByClassName(childEle)
    //获取其中一个的宽度
    var boxWidth = notesonbox[0].offsetWidth
    //获取文档的宽度(兼容)
    var screen = document.documentElement.clientWidth || document.body.clientWidth
    // 父盒子居中，给父盒子设置宽度
    notefatherbox.style.width = cols * boxWidth + 'px'
    notefatherbox.style.margin = '0 auto'
    //子盒子定位（从第二行开始）
    // 定义变量
    var heightArr = [], boxHeight = 0, minBoxHeight = 0, minIndex = 0
    //遍历所有的盒子
    for (let i = 0; i < notesonbox.length; i++) {
        boxHeight = notesonbox[i].offsetHeight
        //判断是否是第一行
        if (i < cols) {
            heightArr.push(boxHeight)
        } else { //剩余行做定位
            //取出数组中最矮盒子的高度
            minBoxHeight = heightArr[minBox(heightArr)]
            //取出最矮盒子再数组中的索引
            minIndex = minBox(heightArr)
            //剩余子盒子的定位
            notesonbox[i].style.position = 'absolute'
            notesonbox[i].style.left = minIndex * boxWidth + 'px'
            notesonbox[i].style.top = minBoxHeight + 'px'
            /*
            更新高度(利用更新这个数组实现动态找最低的
            每次循环时会在原本最低的那个盒子的高度基础上加上新添加的盒子的高度)
            */
            heightArr[minIndex] += boxHeight;

        }
    }
}
// 获取高度最小的一个值
function minBox(box) {
    var j = 0
    for (i in box) {
        if (box[j] > box[i]){
            j = i
        }
    }
    return j
}

当时js一直不起效果 最后发现我没给子元素开启浮动 子元素通过上和左的方式进行定位 然后通过字符串 进行数据的追加。
体会
其实写的时候没考虑到懒加载 回头可以去了解一下 然后继续加油。