JavaScript简单实现瀑布流

0x1.瀑布流的介绍

  瀑布流也称为瀑布流式布局，广泛使用于网站、APP上，主要表现为参差不齐的多栏式布局，随着页面的滚动条向下滚动不断加载数据块并附加到底部中。

特点：图片大小不一竖型排列、滚动鼠标不断加载数据、便于用户交互。

应用示例：花瓣网

0x2.实现瀑布流

浏览器环境：Safari 10.1

body主体部分：

body

样式设置部分：

css

javascript部分：

创建li标签：

li标签

获取浏览器的相关参数：

浏览器参数

在ul标签中添加li标签：

添加li

滚动动态添加li标签：

滚动判断

效果：

GIF效果图

github：lijaha

如果我的文章能让你有所收获，可以关注一下我的公众号：lijahaTalk

lijahaTalk