瀑布流布局原理（怎样看待现在网页设计中比较流行的瀑布流形式）

本文目录

• 怎样看待现在网页设计中比较流行的瀑布流形式
• 如何在listview的item中内嵌瀑布流哦
• 瀑布流是什么
• 求教 android瀑布流该如何实现
• Pinterest 瀑布布局是怎么实现的
• 什么叫瀑布流
• iOS 瀑布流的布局中如何重写返回页眉页脚的方法

怎样看待现在网页设计中比较流行的瀑布流形式

适合于产品展示，不适合到处都用，是个很好的插件。瀑布流网页布局设计，现在有泛滥成灾之势，不过存在即合理，瀑布流为什么这么走俏，是因为它能满足用户的体验与需要。而对于瀑布流式布局，想必网页设计师们已不再陌生，随着pinterest自2011年开始走红，瀑布流式的布局被越来越多的网站所使用。国内的花瓣网、堆糖网、布兜、发现啦，美丽说，蘑菇街，人人逛街，凡客达人等，复制Pinterest的网站在中国蜂拥而现，粗略估计已有上百家之多。为什么选择瀑布流？对图片的展现高效有吸引力既然pinterest式蜂拥而现，我们先从体验角度看，瀑布流布局为什么好？笔者浅见。随着读图时代快餐式消费的来临，瀑布流对于图片的展现，是高效而具有吸引力的，用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免里用户鼠标点击的翻页操作,这么浏 览起来,随着鼠标的滚动,是不是最小的操作成本能获得做多的内容体验,是不是比较容易沉浸其中,不被打断。有没有逛起街来边走边看,被琳琅满目的商品吸引 的感觉呢?除此之外，瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式，巧妙的利用视觉层级，视线的任意流动又缓解了视觉疲劳。PinterestPinterest于2011年诞生，如今每月独立访问用户数量已突破1100万，平均每位用户每月在网站上逗留98分钟，这一时长在诸多社交平台中仅次于Tumblr和Facebook。Pinterest作为瀑布流布局的鼻祖，必然引导瀑布流设计的方向。吸顶式导航为什么使用吸顶式导航呢？用户在瀑布流模式下一目十行去浏览，如果快速切换到分类，又要回到顶部，然后再选取分类，吸顶式导航可以让用户轻松切换分类，设计要点，吸顶式导航不可以太宽，色彩上不可以太抢眼，只需要保证用户在需要时，它悄悄的在就可以。2.评论的锚点定位pinterest起初设计是评论框全部默认展示的， 意在鼓励用户输入评论。而在最近的改版中，pinterest的评论框的设计改为:当图片和已有评论长度较小时，评论框默认收起，点击评论的操作 button后，锚点定位到评论框，同时光标闪动，提示用户输入文字。而图片和已有评论较长时（接近或大于一屏的高度），默认评论框打开，因为用户如果靠 评论的button打开评论框需要回滚较多距离，成本太高。3.轻巧的点击查看大图设计点击空白区域收起，再次点击大图跳转到图片来源网站。非常适合轻松随意的阅读尤其是当用户适应此处的设计逻辑后，很容易产生沉浸式浏览，同时又满足了查看细节的需要。4.占位加载，保持视觉体验的顺畅用户在不断滚动鼠标滚轮浏览的过程中，网速并不总是尽如人意的，因此采用占位加载形式（预加载出图片高度的灰度图），不让加载过程中画面过于跳动，可以让用户视觉体验平缓些，视觉过度流畅，尽量小的干扰用户浏览的行为。

如何在listview的item中内嵌瀑布流哦

那么本篇文章是我们ListView系列三部曲的最后一篇，在这篇文章当中我们将对ListView进行功能扩展，让它能够以瀑布流的样式来显示数据。另外，本篇文章的内容比较复杂，且知识点严重依赖于前两篇文章，如果你还没有阅读过的话，强烈建议先去阅读 Android ListView工作原理完全解析，带你从源码的角度彻底理解 和 Android ListView异步加载图片乱序问题，原因分析及解决方案 这两篇文章。一直关注我博客的朋友们应该知道，其实在很早之前我就发布过一篇关于实现瀑布流布局的文章，Android瀑布流照片墙实现，体验不规则排列的美感。但是这篇文章中使用的实现算法比较简单，其实就是在外层嵌套一个ScrollView，然后按照瀑布流的规则不断向里面添加子View，原理如下图所示：虽说功能是可以正常实现，但是这种实现原理背后的问题太多了，因为它只会不停向ScrollView中添加子View，而没有一种合理的回收机制，当子View无限多的时候，整个瀑布流布局的效率就会严重受影响，甚至有可能会出现OOM的情况。而我们在前两篇文章中对ListView进行了深层次的分析，ListView的工作原理就非常巧妙，它使用RecycleBin实现了非常出色的生产者和消费者的机制，移出屏幕的子View将会被回收，并进入到RecycleBin中进行缓存，而新进入屏幕的子View则会优先从RecycleBin当中获取缓存，这样的话不管我们有多少条数据需要显示，实际上屏幕上的子View其实也就来来回回那么几个。那么，如果我们使用ListView工作原理来实现瀑布流布局，效率问题、OOM问题就都不复存在了，可以说是真正意义上实现了一个高性能的瀑布流布局。原理示意图如下所示：OK，工作原理确认了之后，接下来的工作就是动手实现了。由于瀑布流这个扩展对ListView整体的改动非常大，我们没办法简单地使用继承来实现，所以只能先将ListView的源码抽取出来，然后对其内部的逻辑进行修改来实现功能，那么我们第一步的工作就是要将ListView的源码抽取出来。但是这个工作并不是那么简单的，因为仅仅ListView这一个单独的类是不能够独立工作的，我们如果要抽取代码的话还需要将AbsListView、AdapterView等也一起抽取出来，然后还会报各种错误都需要一一解决，我当时也是折腾了很久才搞定的。所以这里我就不带着大家一步步对ListView源码进行抽取了，而是直接将我抽取好的工程UIListViewTest上传到了CSDN，大家只需要点击 这里 进行下载就可以了，今天我们所有的代码改动都是在这个工程的基础上进行的。另外需要注意的是，为了简单起见，我没有抽取最新版本的ListView代码，而是选择了Android 2.3版本ListView的源码，因为老版本的源码更为简洁，方便于我们理解核心的工作流程。

瀑布流是什么

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。特点:1、琳琅满目：整版以图片为主，大小不一的图片按照一定的规律排列。2、唯美：图片的风格以唯美的图片为主。3、操作简单：在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。有一个软件叫瀑布流。

求教 android瀑布流该如何实现

网上关于android瀑布流的例子一大堆，但是很多都是很复杂，对于新手来说有一定的难度。原理很简单，就是异步下载图片，把图片addView到ScrollView（因为可以上下一直拖动）中，你需要屏幕显示几列就在ScrollView中放置几个LinearLayout，下面我就一个简单的例子来讲解android瀑布流的用法，样子很丑就不上图了。。1、在xml布局文件：很简单就是2、在java代码中：先声明几个变量，其中imagePathStr数组用来存图片的链接private LinearLayout leftLayout;private LinearLayout rightLayout;private String imagePathStr = { “http://www.cf69.com/Upfiles/BeyondPic/2010-08/20108175740983313.jpg“,“http://www.syfff.com/UploadFile/pic/2008122163204.jpg“, “http://pic.newssc.org/0/10/34/32/10343297_564251.jpg“,“http://ent.hangzhou.com.cn/images/20090311/zym2009031323.jpg“, “http://a4.att.hudong.com/86/60/01300000013093119087608457965.jpg“,“http://file.sdteacher.gov.cn/upload/gz0901/images/0907/22/110437191.jpg“,“http://www.fun9.cn/uploadfile/starpic/uploadpics/200910/20091008090155126.jpg“,“http://img3.yxlady.com/yl/UploadFiles_5361/20110820/20110820120609469.jpg“,其次，在oncreate()中采用异步加载图片的方法把获取到的Drawable添加到左右两栏的LinearLayout中：

Pinterest 瀑布布局是怎么实现的

jQuery 有一个插件，叫 jQuery Masonry 可以轻松地将默认 inline-block 布局的页面块转化瀑布流格式，只需要一行代码，可以实现很多种形式的瀑布流。所以，如果不关心底层的实现原理，会用它就足够了。

什么叫瀑布流

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

优点：

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

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

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

iOS 瀑布流的布局中如何重写返回页眉页脚的方法

一直以来都想研究瀑布流的具体实现方法(起因是因为一则男女程序员应聘的笑话，做程序的朋友应该都知道)。最近学习到了瀑布流的实现方法，瀑布流的实现方式有多种，这里应用collectionView来重写其UICollectionViewLayout进行布局是最为简单方便的。但再用其布局之前必须了解其布局原理。　　在这里笔者挑出其中较为重要的几个方法来进行讲解。1.- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds 当collectionView视图位置有新改变(发生移动)时调用，其若返回YES则重新布局2.- (void)prepareLayout 准备好布局时调用。此时collectionView所有属性都已确定。读者在这里可以将collectionView当做画布，有了画布后，我们便可以在其上面画出每个item3.- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect 返回collectionView视图中所有视图的属性(UICollectionViewLayoutAttributes)数组4.- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath 返回indexPath对应item的属性5.- (CGSize)collectionViewContentSize 设置collectionView的可显示范围这些方法中最重要的便是3，4方法，在3方法中返回所有视图属性数组，并根据这些属性进行布局，而4方法则返回每个item的属性，我们则在这里设置每个item的属性(主要是frame)，就可以让collectionView按照我们的意愿进行布局了!(在这里我们不需要用到1方法，若item属性根据滑动改变，此时就需要随时进行布局改变)附上出处链接：http://www.tools138.com/create/article/20150924/020025635.html