JS实现图片瀑布流效果

本文实例为大家分享了JS实现图片瀑布流的具体代码，供大家参考，具体内容如下

过程：

1、创建一个放所有图片的模块bigblock。
2、获取这个大模块，追加一个子元素块来放小图。
3、封装一个函数list(n)来存放50张图片，并且将每张图追加放入空数组ele[]中。
4、封装一个函数set_position（），来确定每个图片的位置，用到了offsetHeight，offsetTop，offsetWidth等属性，同时给最大块也设置动态的高度，随着加载的图片数量增多，最大块的高度也随着增高。
5、使用 window.onload事件，加载图片更方便。
6、给浏览器的滚动条添加事件，让滚动条滑到body的可视区域最底部以上10px 时，加载出新的30张图片，并且每次滚动条停留在到刚加载的图片位置。

图片不是动图，看不出什么效果，但代码都是正确的，小伙伴可以试一试。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。