1. 为了防止某些人不知道瀑布流是啥玩意我还是先介绍下

瀑布流:又称瀑布流式布局,是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动而不断加载。

2. 优点

  1. 操作简单(滚动鼠标)
  2. 节省空间
  3. 用户体验好

3. 缺点

  1. 无限滚动加载模式,页脚就永远加载不出来了。

4.代码实现

4.1 第一步 创建模板

首先你的想好,你想要创建几列,然后在body中创建好模板

4.2 第二步 设置css样式

设置写简单的样式,让每个图片之间有点间隙,通俗易懂点就是,让照片更有视觉冲击力,比较有美感。

4.3 第三步 添加图片

现在就是利用js原生循环创建图片和li。

4.4 第四步 怎么把图片添加到ul中

这时候就要想想怎么把图片添加到ul,因为这时候图片大小不一样,如果你依次循环添加到ul中,可能会出现长的图片都在一列,短的都在一列,可能会使中间出现一个大的缺口,那么就会很缺少美感。

所以,我们就可以,每次都找到它的最短的那一列,然后添加到它的后面,不管是谁,只要在添加图片的时候,只要你短,我就在你后面添加的道理。就能有效的避免刚才那种情况的发生了,吼吼,看代码吧......

4.5 第五步 完成瀑布流之各种型号美女

图片不能太大,要不然上传不了,这就尴尬了......

5. 完整代码

就知道有些人按捺不住,我懂你,把完整代码都给你好了吧!!!

6. 结束语