瀑布流实现方法
本章要介绍的是加载瀑布流的方法是,固定列数的浮动布局,根据你设备屏幕的宽度和加载图片的宽度来固定列数,之后又获取每一列图片的高度,将要加载的图片放在高度最小的那一列图片下面,循环数组不断的寻找高度最小的那一列图片,将图片放在下面实现基本的布局效果。然后再创建一个滚动条监听事件(当最后一张图片距顶的高度<屏幕的高度+滚动条滚动的距离)时,就触发我们在页面动态的添加图片的事件(用JavasSript在Html DOM创建节点,并为其添加根元素)。
基本的操作步骤如下
- 在Html页面中创建承载图片的div
- 将准备的图片都加加载到页面中
- 为图片添加css样式
- 获取第一排每一列图片的高度
- 固定一排图片的宽度并且居中对齐
- 将图片放在第一排高度最小的列下面
- 改别图片高度并不断的循环获得高度最小的图片
- 滚动条监听事件
- 创建Json字符出模拟数据
- 动态的创建节点并为其添加根元素
- 调整动态图片的格式