瀑布流布局,瀑布流布局英文

关于waterfall 瀑布流布局出现布局错乱的问题

说明：首先waterfall是weex的原生组件，WEEX的出现让我们可以使用Vue来进行移动端原生应用开发。这里就需要了解什么是weex？

Weex是一个可以使用现代化的 Web 技术开发高性能原生应用的框架"，这是Weex官网对其的一句很简介明了的定义。Weex是一个可以利用web 前端开发技术来实现Android/ios 原生引用的框架，使用 Vue 作为上层框架，并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API。

1、组件是提供瀑布流布局的核心组件。瀑布流，又称瀑布流式布局是比较流行的一种页面布局，视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动，这种布局还可以不断加载数据块并附加至当前尾部。

2、 waterfall 只支持 Android 和 iOS，不支持 Web。

3、注意：（个人经验总结）当waterfall组件里面出现图片image组件时，不允许对image自适应高度是因为weex的css样式布置auto属性。所以在当我们用uniapp开发时，uniapp的mode属性是不能使用的。且weex的image并没有mode属性而是resize属性。所以image的宽高就需要固定，如需保持宽度一致高度适应就需要计算了。

瀑布流是什么?

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。

特点:

1、琳琅满目：整版以图片为主，大小不一的图片按照一定的规律排列。

2、唯美：图片的风格以唯美的图片为主。

3、操作简单：在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。

有一个软件叫瀑布流。

瀑布式布局对于项目的弊与利

当涉及到事件营销和网页设计时，瀑布流式布局的趋势在我们的设计中地位显得越来越重要了。在试图吸引用户注意力上，很多网站都能无限极的滚动。而且这种浏览方式已经存在好几年了，它在几个非常受欢迎的网站被证明是成功的，例如Facebook、twitter、Instagram。瀑布流式的设计适合这些产品，但是不一定适合我们的当前产品，虽然瀑布流式的也很多有利的一面，但是也存在一些弊端。

尽管会有各种不同的功能特性，但是在瀑布流式的设置中用户只要向下滚动就会持续的加载，而从界面上看会有无限的向下延伸。

对于瀑布流式布局最好的服务对象是那种用户参与度较低，而且只是简单的浏览的产品。就像twitter网站中，每个单独的信息内容非常少，用户一眼就可以参与所有的内容。

在一般情况下，瀑布流式布局的好处在于易于向用户传输高频率的信息容量。如果公司的产品比较适合这种状态，可以考虑使用。以下是瀑布式布局的一些积极特征：

1、留住用户：其中无限的滚动就是最大的特征，而这点也是最容易吸引用户的地方。目的在于吸引用户继续向下滚动，更多的精彩内容还没有结束，就凭这点对用户有着很强的吸引力 ，因外大多数的社交产品已经向我们证明了这点。

2、易用性：这个也是显而易见的，向下滚动是现在普遍使用的技巧，用户不需要额外的点击就能轻松访问到主要内容。

3、移动端合适的视觉效果：瀑布流式的风格提供了简单的视觉元素，并且非常适合移动端的单指向下滑动浏览的方式。

这也是为什么瀑布流式布局非常适合Instagram，这款产品的目的就是为快速显示一些照片，而且使用这款产品的用户几乎都是使用移动端的设备浏览。

有些情况下避免使用瀑布流式风格的设计

1、电子商务网站：这类型的网站主要是让用户能够轻松根据不同的功能需求之间的易于比较。以销量为导向的网站需要使用简单清晰的导航工具。如果我们的公司业务是销量，那就不太适合这种风格了，特别是考虑到用户需要随时进行选择和调整，使用导航栏的设计更加便捷。

2、要求用户搜索特定的产品和功能服务的人和网站：例如新闻类、杂志、期刊和深入阅读文章的时候，特别是那种无休止的加载，让用户会减少在页面上停留时的时间。

3、从导航栏回到具体项目中：这类型的页面不能因赶时髦，当在用户第二次回到特定页面的时候就比较困难。特别时电子商务网站，另外由于不能提供特定区域的书签，用户无法再第二次准确的找到相关信息，不能提供固定的位置。例如Pinterest网站中用户只要重新刷新页面，可能就永远找不到前几秒看到的信息了。

4、不利于搜索引擎的优化：对于瀑布流式的风格中讨论较多的一点是对于搜索引擎优化的负面影响，因为这种方式整个内容区域都只是一个单页，那么对于搜索引擎的爬取不利，只有一个meta的简单描述，会忽略一些内容信息。

5、可用性问题：一些网站的功能与瀑布流式的风格是不兼容的，比如页脚部分有用的信息，用户需要使用的话，就要向下不停的滚动，或许永远找不到吧，这是很糟糕的体验，用户当然也就不会停留。

6、用户无法选择退出：瀑布流式布局也许不太适合用户的喜好，因为没有办法退出，如果用户希望跳过一些无关的信息，用户是无法进行选择。

如果选择在网站上使用瀑布流式布局，一些地方可以有效提高用户的体验：

1、制作一份备选计划：因为瀑布流式主要依靠的是javascript，一些用户无法访问该网站。设计师可以计划通过设计网站的内容与基本页面合理分层。

2、保持导航功能的可见性：如果用户需要通过职位导航页面搜索信息，而且不会存在用户滚动回来的现象。

3、不要使用滚动条：这里没有必要向用户显示当前的进度，因为用户可能会以为就要结束时，才发现还在加载内容。

4、提供负载信息：如果用户发现进入到内容加载的最下面了，最好使用简单的icon提示用户，还有更多精彩内容在加载中。。。

正如网页设计的趋势发展一样，瀑布流式的版式布局有好有坏，这一切都取决于我们自己的目标定位。而以销量为主的网站，并希望用户与内容之间能无缝衔接之前，需要仔细考虑。否则乱用瀑布流式布局将会导致用户的脱离，并与产品的核心目标背道而驰。

什么叫瀑布流？

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

优点：

有效的降低了界面复杂度，节省了空间:我们不再需要臃肿复杂的页码导航链接或按钮了。

对触屏设备来说，交互方式更符合直觉:在移动应用的交互环境当中，通过向上滑动进行滚屏的操作已经成为最基本的用户习惯，而且所需要的操作精准程度远远低于点击链接或按钮。

更高的参与度:以上两点所带来的交互便捷性可以使用户将注意力更多的集中在内容而不是操作上，从而让他们更乐于沉浸在探索与浏览当中。