原生JavaScript实现一个瀑布流布局
瀑布流布局概念
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。
瀑布流布局特点
- 琳琅满目：整版以图片为主，大小不一的图片按照一定的规律排列。
- 唯美：图片的风格以唯美的图片为主。
- 操作简单：在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。
代码实现
源代码地址：
https://github.com/microzz/waterfall-js
效果预览
在线预览地址1：
http://microzz.cn/waterfall/
在线预览地址2：
https://microzz.github.io/waterfall-js/
瀑布流布局优缺点
布局优点
- 有效的降低了界面复杂度，节省了空间：我们不再需要臃肿复杂的页码导航链接或按钮了。
- 对触屏设备来说，交互方式更符合直觉：在移动应用的交互环境当中，通过向上滑动进行滚屏的操作已经成为最基本的用户习惯，而且所需要的操作精准程度远远低于点击链接或按钮。
- 更高的参与度：以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上，从而让他们更乐于沉浸在探索与浏览当中。
- 布局缺点
- 有限的用例：
- 无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容。
- 例如，在电商网站当中，用户时常需要在商品列表与详情页面之间切换，这种情况下，传统的、带有页码导航的方式可以帮助用户更稳妥和准确的回到某个特定的列表页面当中。
- 额外的复杂度：
- 那些用来打造无限滚动的JS库虽然都自称很容易使用，但你总会需要在自己的产品中进行不同程度的定制化处理，以满足你们自己的需求;另外这些JS库在浏览器和设备兼容性等方面的表现也参差不齐，你必须做好充分的测试与调整工作。
- 再见了，页脚：
- 如果使用了比较典型的无限滚动加载模式，这就意味着你可以和页脚说拜拜了。
- 最好考虑一下页脚对于你的网站，特别是用户的重要性;如果其中确实有比较重要的内容或链接，那么最好换一种更传统和稳妥的方式。
- 千万不要耍弄你的用户，当他们一次次的浏览到页面底部，看到页脚，却因为自动加载的内容突然出现而无论如何都无法点击页脚中的链接时，他们会变的越发愤怒。
- SEO：
- 集中在一页当中动态加载数据，与一页一页的输出相比，究竟那种方式更利于SEO，这是你必须考虑的问题。对于某些以类型网站来说，在这方面进行冒险是很不划算的。
- 关于页面数量的印象：
- 其实站在用户的角度来看，这一点并非负面;不过，如果对于你的网站来说，通过更多的内容页面展示更多的相关信息(包括广告)是很重要的策略，那么单页无限滚动的方式对你并不适用。
关于
GitHub：https://github.com/microzz
个人网站：https://microzz.com/
相关链接
CSS3实现一个瀑布流布局：
https://microzz.com/2017/02/19/waterfallcss3/
jQuery实现一个瀑布流布局：
https://microzz.com/2017/02/20/waterfalljq/