什么是瀑布流(Masonry)
瀑布流，又称瀑布流式布局。
是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。
瀑布流使用前提有三个：
一是散乱无序的碎片化内容；
二是用户对内容的获取带有强烈的随机和不稳定性、需要大范围扫视来做筛选；
三是用户对内容只做极轻量的互动消费。
所以表现层是由产品定位和信息特点决定的，对于强目的性的信息筛选、沉溺型消费的重内容、重体验、重互动产品来说，瀑布流有害无益。
瀑布流的特点
1、琳琅满目：整版以图片为主，大小不一的图片按照一定的规律排列。
2、唯美：图片的风格以唯美的图片为主。
3、操作简单：在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。
瀑布流的优点
1、布局简单，没有特别的难点；
2、不必明确知道数据块高度，当数据块中有图片时，就不需要指定图片高度。
3、有效的降低了界面复杂度，节省了空间：我们不再需要臃肿复杂的页码导航链接或按钮了。
4、对触屏设备来说，交互方式更符合直觉：在移动应用的交互环境当中，通过向上滑动进行滚屏的操作已经成为最基本的用户习惯，而且所需要的操作精准程度远远低于点击链接或按钮。
5、更高的参与度：以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上，从而让他们更乐于沉浸在探索与浏览当中。
瀑布流的缺点
1、有限的用例：
无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容。
例如，在电商网站当中，用户时常需要在商品列表与详情页面之间切换，这种情况下，传统的、带有页码导航的方式可以帮助用户更稳妥和准确的回到某个特定的列表页面当中。
2、额外的复杂度：
那些用来打造无限滚动的JS库虽然都自称很容易使用，但你总会需要在自己的产品中进行不同程度的定制化处理，以满足你们自己的需求;另外这些JS库在浏览器和设备兼容性等方面的表现也参差不齐，你必须做好充分的测试与调整工作。
3、再见了，页脚：
如果使用了比较典型的无限滚动加载模式，这就意味着你可以和页脚说拜拜了。
最好考虑一下页脚对于你的网站，特别是用户的重要性;如果其中确实有比较重要的内容或链接，那么最好换一种更传统和稳妥的方式。
4、千万不要耍弄你的用户，当他们一次次的浏览到页面底部，看到页脚，却因为自动加载的内容突然出现而无论如何都无法点击页脚中的链接时，他们会变的越发愤怒。
5、 SEO：
集中在一页当中动态加载数据，与一页一页的输出相比，究竟那种方式更利于SEO，这是你必须考虑的问题。对于某些以类型网站来说，在这方面进行冒险是很不划算的。
6、关于页面数量的印象：
其实站在用户的角度来看，这一点并非负面;不过，如果对于你的网站来说，通过更多的内容页面展示更多的相关信息(包括广告)是很重要的策略，那么单页无限滚动的方式对你并不适用。
7、列数固定，扩展不易，当浏览器窗口大小变化时，只能固定的x列，如果要添加一列，很难调整数据块的排列；
8、滚动加载更多数据时，还要指定插入到第几列中，不够方便。
9、只有高级浏览器中才能使用；
10、数据块排列是从上到下排列到一定高度后，再把剩余元素依次添加到下一列，这个本质上就不一样了；鉴于这些主要缺点，注定了该方法只能局限于高端浏览器，而且，更适合于文字多栏排列。
瀑布流作品
1、带收藏、转载和返回顶部的jquery瀑布流特效
http://www.jq-school.com/Detail.aspx?id=351
2、响应式jquery瀑布流结合图片延迟加载特效
http://www.jq-school.com/Detail.aspx?id=346
3、网友Null分享Jquery响应式瀑布流布局插件
http://www.jq-school.com/Detail.aspx?id=245
4、网友sole分享23行Jquery代码实现定位瀑布流布局特效
http://www.jq-school.com/Detail.aspx?id=163
5、网友微笑分享原创Jquery实现瀑布流特效
http://www.jq-school.com/Detail.aspx?id=162
6、Aui-core实现模拟MVC单列表绝对定位版瀑布流
js特效
http://www.jq-school.com/Detail.aspx?id=147
7、分享一款利用Jquery.masonry插件实现的瀑布流特效
http://www.jq-school.com/Detail.aspx?id=62
8、Jquery实现瀑布流布局插件
http://www.jq-school.com/Detail.aspx?id=29
如果您觉得本文的内容对您的学习有所帮助：
关键字：
瀑布流 masonry 瀑布流式布局 Pinterest