谈谈原生javescript实现瀑布流布局

瀑布流是什么？

瀑布流——瀑布流失布局

一种网站页面布局，视觉表现为参差不齐的多兰布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

主要特点：

琳琅满目：正版以图片为主，大小不一的图片按照一定的规律排列。

唯美：图片的风格以唯美的图片为主。

操作简单：在浏览网站的时候只需要轻轻滑动滚轮即可...

布局优点：

有效降低界面复杂度，节省空间；对触屏设备来说，交互方式更符合直觉；更高的参与度。

本文主要采取原生JavaScript实现瀑布流布局，从以下三方面出入：

（1）结构层：

    <div class="wrap">
        <div><img src="../img/1.jpg" alt="">1</div>
        <div><img src="../img/2.jpg" alt="">2</div>
        <div><img src="../img/3.jpg" alt="">3</div>
        <div><img src="../img/4.jpg" alt="">4</div>
        <div><img src="../img/5.jpg" alt="">5</div>
        <div><img src="../img/6.jpg" alt="">6</div>
        <div><img src="../img/7.png" alt="">7</div>
        <div><img src="../img/8.jpg" alt="">8</div>
        <div><img src="../img/9.jpg" alt="">9</div>
        <div><img src="../img/10.jpg" alt="">10</div>
        <div><img src="../img/11.jpg" alt="">11</div>
        <div><img src="../img/12.jpg" alt="">12</div>
        <div><img src="../img/13.jpg" alt="">13</div>
        <div><img src="../img/14.jpg" alt="">14</div>
        <div><img src="../img/15.jpg" alt="">15</div>
        <div><img src="../img/16.jpg" alt="">16</div>
        <div><img src="../img/17.jpg" alt="">17</div>
        <div><img src="../img/18.jpg" alt="">18</div>
    </div>

（2）表现层：根据用户设备分辨率，实现响应式布局方式，容器宽高给auto，具体实现由js控制。

        *{margin: 0;padding: 0}
        .wrap{width: auto;height: auto;margin: 0 auto;}
        .wrap div{width: 280px;height: auto;box-sizing: border-box;float: left;margin:10px;padding: 10px;border: solid 1px red;}
        .wrap div img{width: 100%}

（3）行为层：

 思路分析：未完待续...