JS基础-特效篇（瀑布流）

案例：https://www.duitang.com/search/?kw=%E5%B8%85%E5%93%A5&type=feed一个叫堆糖的网址，搜索图片的时候，能够不断的往下浏览！
案例：https://list.mogu.com/search/goods?q=%E8%BF%9E%E8%A1%A3%E8%A3%99&acm=3.mce.1_10_13u0k2.39084.108675.lSznUswUSj2nz.mid_39084-sd_115-mdt_sketch-pm_998-dit_-lc_201&from=searchplacehold&ptp=31.v5mL0b.0.0.yWjN8CKG这个是女装的网站！往下拉也是，但是他是等宽等高！所以不典型！！！！

外边有一个大盒子，里面有很多个小盒子！宽度都是一样的小盒子，但是高度不一样！参差摆放的，可以用瀑布流！
布局：父盒子，子盒子；子盒子相对于父盒子做定位！第二行的第一个盒子放在第一行最矮的那个盒子后面！以此类推！盒子中最后一张图出现一半，再进行渲染加载！

1.基础页面

<div id="main">
    <div class="box">
        <div class="pic"><img src="images/color02.jpeg" alt=""></div>
    </div>
    <!--这里面有很多box和pic，可以复制很多！这里略过!-!>
    <div class="box">
        <div class="pic"><img src="images/color03.jpg" alt=""></div>
    </div>
</div>

2.样式文件

<link rel="stylesheet" href="css/index.css">

*{
   
    margin: 0;
    padding: 0;
    border: none;
}
img{
   
    vertical-align: top; /*顶部对齐*/
}
#main{
   
    position: relative;/*方便后面定位*/
}

.box{
   
    float: left;
    padding: 15px 0 0 15px