瀑布流原理、代码实现

一、什么是瀑布流

• 图片的宽度固定，图片的长度不一样
• 当页面滚动时，会再次加载数据，动态的渲染在页面上
• 是一种比较流行的网站页面布局 ，视觉表现为参差不齐的多栏布局
• 随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部

二、瀑布流布局的原理

• 设置宽度一致
• 根据浏览器宽度以及每列宽度计算除列表个数，列表默认为0
• 当图片加载完成，所有图片依次放置在最小的列数下面

三、瀑布流代码实现

数据文件见 ： 下载-瀑布流布局、图片懒加载.js文件
html部分

<div id="list">
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li class="item"></li>
        <li