js实现的瀑布流布局

2019独角兽企业重金招聘Python工程师标准>>>

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. 结束语

看完我写的js瀑布流之各种型号美女，有没有感觉你在喷血啊。

 

转载于:https://my.oschina.net/u/2391658/blog/898514