JS瀑布流特效（还未完全完成）

效果图

未添加JS特效时样式

由于只是做样式我就没有使用很多图片

HTML

由于我的图片大小 太不一，直接就使用了行内样式来修改

<div id="main">
    <div class="box"><div class="pic"><img src="图片/1.jpg" alt="" style="height: 100px"></div></div>
    <div class="box"><div class="pic"><img src="图片/2.jpg" alt="" style="height: 50px"></div></div>
    <div class="box"><div class="pic"><img src="图片/3.jpg" alt="" style="height: 80px"></div></div>
    <div class="box"><div class="pic"><img src="图片/4.jpg" alt="" style="height: 40px"></div></div>
    <div class="box"><div class="pic"><img src="图片/5.jpg" alt="" style="height: 70px"></div></div>
    <div class="box"><div class="pic"><img src="图片/6.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="图片/7.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="图片/8.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="图片/9.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="图片/10.jpg" alt=""></div></div>
    <div class="box"><div class="pic"><img src="图片/11.png" alt=""></div></div>
</div>

CSS

*{
    margin: 0;
    padding: 0;
    border:none;
}
img{
    vertical-align: top;    图片靠顶部
    width:200px;
    height: 300px;
}
html,body{
    width: 100%;
    height: 100%;
}
#main{
    position: relative;   设置外层盒子为relative 方便后面子盒子定位
}
.box{
    float: left;  让所有子盒子左浮动，拜托原来的块级样式
    padding:15px 0 0 15px;
      在这里这样设置是为了避免在对盒子定位时，需要加很多图片盒子之间的边距设计的
}
.pic{
给每个图片盒子设置统一的样式
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
}

JS

特效分析

找到第一行中图片高度最小的图片以后
把第二行的第一张图片接在刚才最小的图片下面
由于设置了定位
所以只需要设置后面图片的top值和left值

top值计算：最矮的图片高度，即之后图片的top值
left值计算：需要求到当前最矮图片前面的盒子数以及盒子的大小

最后及时更新最小的长度
不然没啥用

本来还要设置滚动以后，图片继续加载的特效，但是我还没写。之后有时间再写吧

window.onload = function () {
    //滚动和加载
    //1、实现瀑布流
    waterFull("main","box");
    //动态加载图片
    window.onscroll = function () {
    }
};
function waterFull(parent,child) {
    //1、父盒子居中
    //1、1 获取所有的父盒子
    var allbox=$(parent).getElementsByClassName(child);
    console.log(allbox);
    //1、2获取盒子宽度
    var boxwidth=allbox[0].offsetWidth;//每一个子盒子的宽度
    //1、3获取屏幕宽度
    var ScreenW=document.documentElement.clientWidth;
    //1、4求列数
    var cols=parseInt(ScreenW/boxwidth);//当前网页大小除以盒子宽度
    console.log(cols);
    //1、5父盒子居中
    $(parent).style.width=cols*boxwidth+'px';//设置总宽度
    $(parent).style.margin="0 auto";//让父盒子居中


    //2、子盒子定位
    //2、1定义高度数组
    var height=[];
    //2、2 遍历子盒子
    var boxH,min,index;
    /*boxH：盒子高度
    *min：接收此行中最矮图片的高度
    *index：用来找当前图片的下标
    */
    for(var i=0;i<allbox.length;i++)//遍历所有的图片
    {
        //2、2、1求每个子盒子的高度
        boxH=allbox[i].offsetHeight;
        //2、2、2取出第一行盒子的高度，放入高度数组
        if(i<cols){
            //第一行
            height.push(boxH);//求最矮的高度
        }else{//剩余行
            //从第后一行开始
            //1、取出最矮盒子高度
            min=Math.min.apply(this,height);//min为height数组中最小的值
            //2、求最矮盒子对应的索引
            //求索引是为了确定它前面有几个盒子，方便计算left值
            index=getminIndex(height,min);
            //3、子盒子定位
            allbox[i].style.position="absolute";
            allbox[i].style.left=index*boxwidth+'px';//下标代表着第几个
            allbox[i].style.top=min+'px';
            //更新数组中的高度
            height[index]+=boxH;//就是让当前最短的和那个接上去的合成一个新的boxH
            //然后又继续循环，找最短的
        }
    }
}
function getminIndex(arr,val) {、
//这里为什么从i=0开始
//是因为要计算前面有几个盒子
//如果i等于1会比实际情况多一个盒子
    for(var i=0;i<arr.length;i++){
        if(arr[i]===val){
            return i;
        }
    }
}
function $(id) {
    return document.getElementById(id);
}