瀑布流式页面布局（瀑布流式页面布局首先由）

本篇文章给大家谈谈瀑布流式页面布局，以及瀑布流式页面布局首先由对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、关于waterfall 瀑布流布局出现布局错乱的问题
• 2、抖音的瀑布流，快手的双瀑布流和传统内容的feed视频流这三种展现形式有什么本质区别？
• 3、前端之瀑布流布局（多种实现方案）
• 4、瀑布流是什么?
• 5、瀑布式布局对于项目的弊与利

关于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的宽高就需要固定，如需保持宽度一致高度适应就需要计算了。

抖音的瀑布流，快手的双瀑布流和传统内容的feed视频流这三种展现形式有什么本质区别？

三种本质区别就是布局方式不同。

瀑布流：

又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，最早采用此布局的是网站是Pinterest，后逐渐在国内流行。我们看到的一些vlog网站或者图片展示网站，对于大小高度不一的图片能自动适应排列，在下拉到底的时候，加载的图片也可以自动适应。

瀑布流更适合那些随意浏览，不带目的性的使用场景，就像是在逛街一样，边走边看，同时被街边琳琅满目的商品吸引着，所以比较适合的图片、小说、资讯类的场景，以现有的成功案例来说，以 UGC 为主的相关网站很多在使用瀑布流进行承载。

Feed流：

顾名思义，Feed是喂养的意思，你想吃什么，就喂给你什么，典型的例子就是微博、知乎的首页，以及各个聚合类资讯app的订阅号。feed流“千人千面”，会针对用户的喜好，推送给用户喜欢的内容。例如抖音、淘宝、知乎。

Feed流的应用场景有：

1、兴趣订阅类产品。针对不同的用户喜好推送不同的内容。

2、针对用户画像差别推荐的产品。与兴趣订阅类不同的事，兴趣是用户自发的行为，而用户画像是通过大数据分析用户行为，有针对性的推荐商品。

3、特定推送类。付费类产品，比如得到app。

前端之瀑布流布局（多种实现方案）

瀑布流布局，一般指根据内容高度自适应填充到某一列以使整体页面和谐，常见的有图片网站，比如每一行每一列的内容是错开的。

瀑布流布局一般是下面这个样子

css中有这么两个属性:

注意

这也是我推荐大家用第一种方法的最主要原因。

这种方案做出来的效果有点奇葩，特殊的应用场景可能会用到，最终效果是横向瀑布流

flex布局中有一个属性 flex-flow ,指明在哪个方向上在长度不够的情况想拆行，详情大家自己查阅

第一种方法其实是最合适的，也是对开发人员要求最高的，即使有思路与算法在开发过程中也会踩很多坑，比如（1）图片预加载，（2）querySelector取元素居然获取不到，（3）使用box-sizing简化计算过程降低复杂性，等等。 box-sizing 属性用好了非常高效，推荐大家去仔细看看

第二种方法其实也可行，但是不推荐

第三种方法就有点扯了，估计不常用到，大家看看就行

瀑布流是什么?

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是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提示用户，还有更多精彩内容在加载中。。。

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

瀑布流式页面布局的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于瀑布流式页面布局首先由、瀑布流式页面布局的信息别忘了在本站进行查找喔。