本文介绍了如何基于Android平台实现瀑布流布局，并给出了具体的代码示例。首先介绍了什么是瀑布流布局以及其特点，然后详细讲解了Android平台如何实现瀑布流布局，最后通过一个具体的实例展示了瀑布流布局的应用场景和实现方法。
Android中展示门类信息一般使用列表视图ListView或者网格视图GridView，特别是电商类APP的首页，除了顶部导航、底部标签、上方横幅外，主要页面都是展示各种商品和活动的网格视图。一般情况下GridView就够用了，不过GridView中规中矩，每个网格的大小都是一样的，有时显得有些死板。比如不同商品的外观尺寸很不一样，冰箱是高高的在纵向上长，空调则是在横向上长，所以若用一样规格的网格来展示，必然有的商品图片被压缩得很小。再比如像新闻摘要，每篇摘要的字数都不一样，为了把文字显示完全，也需要对每个网格自适应高度，字数多的网格分配较小的高度，字数较多的网格分配较大的高度。可惜GridView不支持自适配网格高度，所以我们得自己写个瀑布流网格控件来实现这样的效果了。 先来理下瀑布流控件的思路，因为GridView每个网格的宽和高都是一样的，所以无法基于GridView进行改造。如果是ListView，每行高度一样，一行内每个元素的长度是可以自定义的，但每列元素的长度必须一样，所以改造ListView的效果也很有限。改造GridView也不行，改造ListView也不行，看来得换个思路了，把复杂问题简单化试试。例如这个页面上只有四个视图：左上区块0、右上区块1、左下区块2、右下区块3，直接用布局文件xml编写的话也不难，可能大家多半会想到采用相对布局RelativeLayout来处理。
前言 RecyclerVie出来已经有一段时间了，它是Google在 2014 年 10 月推出Android5.0的时候推出了MaterialDesign,而RecyclerView是MaterialDesign重要组件之一，用来替代ListView和GridView。 相信还有一部分同学还在使用ListView和GridView（我前一段时间还在用），从现在开始，让我们跟他们说拜拜，开始体验RecyclerView。 优点 他可以通过设置LayoutManager来快速实现listview、gridv
RecyclerView 是 Google 官方提供的任何 基于适配器显示的视图 , 可以实现普通列表 ( ListView ) , 网格列表 ( GridView ) , 瀑布流 , 以及各种自定义形式的多容器布局 ;
Hello 艾维巴蒂，今天给大家介绍一下 ListView和 GridView的“大哥“— RecyclerView，这个控件是当下最流行且最常用的一个控件，并且在实战项目中它随处可见，而为什么将它称为“大哥”，请听我们娓娓道来~
在项目中，有时候会有诸如“日历”展示之类的需求，此时单列表ListView控件已经无法满足我们的需要。GridView就是为了满足这样的“二维数组”排列而存在的。
首先说明一点昨天发了一篇关于 ListView 的使用入门文章，得到了大家的一致调侃。我的想法是这样的，虽然现在 ListView 已经被 RecyclerView 替代了，但是本系列作为入门系列，力求内容完整！还是有必要提及一下这么重要的控件的，谁能保证老的项目没有 ListView 呢？
大家还记得之前在第38期~第50期都在学习列表控件吗，其中用了8期讲ListView的使用，相信都已经掌握好了吧。那么来学习在Android 5.X新增的一个列表组件，那就是RecyclerView的
Android RecyclerView 是Android5.0推出来的，导入support-v7包即可使用。 个人体验来说，RecyclerView绝对是一款功能强大的控件。 首先总结下RecyclerView的特点： 1.支持不同方向，不同排版模式，实现多种展现数据的形式，涵盖了ListView,GridView,瀑布流等数据表现的形式 2.内部实现了回收机制，无需我们考虑View的复用情况 3.取消了onItemClick等点击事件，需要自己手动去写 -------------------------
RecyclerView是Android在support-v7库中新推出控件，中文别名为循环器视图，它的功能非常强大，可分别实现ListView、GridView，以及瀑布流网格的显示效果。 RecyclerView相关工程在sdk中的路径为sdk\extras\android\support\v7\recyclerview，不过幸好用它不像用Toolbar那样麻烦，要想使用Toolbar得先导入并引用v7-appcompat工程（具体步骤参见《Android开发笔记（一百一十九）工具栏Toolbar》），而使用RecyclerView只需像其他第三方jar一样往libs目录添加android-support-v7-recyclerview.jar就好了。 但是若在Eclipse/ADT中调用RecyclerView，可能app运行时会报错“Caused by: java.lang.NoClassDefFoundError: android.support.v7.recyclerview.R$styleable”，这时就不能使用sdk\extras\android\support\v7\recyclerview下面的jar包，而要到extras/android/m2repository/com/android/support/recyclerview-v7目录下，在版本号21.0.0的子目录中找到recyclerview-v7-21.0.0.aar，该aar文件其实是个压缩文件，解压该文件可得到classes.jar，将该jar包更名并加入到你的工程，上面的运行错误应该就没有了。 下面看看强悍的RecyclerView都提供了哪些常用方法： setAdapter : 设置列表项的适配器。有关适配器的详细说明见下一标题。 setLayoutManager : 设置列表项的布局管理器。目前有三种，分别是：线性布局管理器LinearLayoutManager、网格布局管理器GridLayoutManager、瀑布流网格布局管理器StaggeredGridLayoutManager。有关布局管理器的详细说明见本文的后半部分。 addItemDecoration : 添加列表项的分割线。 removeItemDecoration : 移除列表项的分割线。 setItemAnimator : 设置列表项的增删动画。 addOnItemTouchListener : 添加列表项的触摸监听器。因为RecyclerView没有实现列表项的点击接口，所以开发者可通过这里的触摸监听器来监控用户手势。 removeOnItemTouchListener : 移除列表项的触摸监听器。
原文：http://kymjs.com/code/2016/07/10/01 作者：kymjs张涛 今天推荐给各位的是张涛同学最近的一篇文章，说实话，RecyclerView 的文章挺多的，但像这样由浅入深，一步步讲到源码实现工作原理的不是那么多，推荐大家阅读。 起深入浅出这名字的时候我是慎重又慎重的，生怕被人骂标题党，写的什么破玩意还敢说深入浅出。所以还是请大家不要抱着太高的期望，因为没有期望就没有失望，就像陈润说的，超预期嘛。全当看小说的心情来看这系列文章了。 这篇文章分几个部分，简单跟大家讲一下 R
RecyclerView出现已经有一段时间了，相信大家肯定不陌生了，大家可以通过导入support-v7对其进行使用。 据官方的介绍，该控件用于在有限的窗口中展示大量数据集，其实这样功能的控件我们并不陌生，例如：ListView、GridView。
本文 GitHub github.com/ponkans/F2E 已收录，有一线大厂面试点思维导图，也整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习。文末有福利~~
瀑布流效果图如下： 前端实现瀑布流的方法很多,其中最简单的就是用CSS实现，其次是通过jQuery实现，最麻烦的就是js，那么就从最麻烦的开始吧$_$ 不管用哪种方法去实现瀑布流效果，html文件里的写法都是相同的，特别是body里的写法，简直是一毛一样的。先把html里的内容粘贴如下： JS实现瀑布流效果 不管是什么语言，实现瀑布流效果的基本思路都是一样的，具体的我就不说了，只聊干货，上代码。 下面看下CSS里面的处理，还是直接粘贴代码如下： 基本的处理搞完了，下面就是最最重要的js处理了。 首
从Android 5.0开始，谷歌公司推出了一个用于大量数据展示的新控件RecylerView，可以用来代替传统的ListView，更加强大和灵活。
ByRecyclerView 是主要是为了解决XRecyclerView和BRVAH其中的问题而产生的RecyclerView开源库。
这个月一直在忙工作。一直没有机会学习新的知识。前两天，突然想写一个瀑布流代码。倒不是找不到瀑布流代码。而是我想自己练练脑子。 首先，先考虑思路。所有的图片，全部采用相对父目录定位的方式。然后用jQuery来找出它应该排在什么位置。最终，达成瀑布流的效果。 想再多没用。开干。
RecyclerView的使用比ListView的使用是比较复杂的，ListView的使用是五个步骤，而我们的RecyclerView的使用有7个步骤，分别为：
瀑布流.gif 功能描述：WSLWaterFlowLayout 是在继承于UICollectionViewLayout的基础上封装的带头脚视图的瀑布流控件。目前支持竖向瀑布流(item等宽不等高、支持头脚视图)、水平瀑布流(item等高不等宽 不支持头脚视图)、竖向瀑布流( item等高不等宽、支持头脚视图)三种样式的瀑布流布局。 前言 ：近几个月一直在忙公司的ChinaDaily和国务院项目，没有抽出时间来写简书，现在终于算是告一段落了，抽出时间来更一篇 实现：主要是重写父类的几个涉及布局属性的方法
原文链接：https://www.cnblogs.com/ludashi/p/4831487.html
我已经将这 5 种场景的实现封装成 npm 包，npm 包地址：https://www.npmjs.com/package/react-masonry-component2，可以直接在 React 项目中安装使用。
网页分页的灵感来源是书本，书本上的分页主要原因是书本的大小限制了内容的承载。那电脑网页可以无限的向下放内容，为什么还需要进行分页呢？
导语 在前端领域，经常会遇到瀑布流布局的开发，最近整理了下相关的使用场景和解决方案，其中包含了简单算法 DP，前端基础知识，业务场景的思考。 什么是瀑布流布局 瀑布流又称瀑布流式布局，是一种比较流行的页面布局方式，英文名称为：Masonry Layouts 。与传统的分页显示不同，视觉上表现为参差不齐的多栏布局，最早由 Pinterest 首先运用。 特别是在移动端，双列瀑布流的应用更加常见，在展现呈现每个元素能够以自身的情况合理占据空间，每个元素宽高不一致，左右依次调整排列，最终占据最小的屏幕高
初始化仅三行代码，只需设置代理和样式，item的大小、头脚视图的大小、行列数以及间距都可以在对应样式的代理方法中自定义，然后设置为UICollectionView的自动流水布局样式，并结合UICollectionView的用法使用，详情看示例
ListView 由于其强大的功能，在过去的 Andorid 开发中使用非常广泛。不过 ListView 需要优化来提升运行效率，就像我们之前所优化的那样，否则性能将很差。还有就是只能够纵向滚动，如果要想实现横向移动，用 ListView 是做不到的。
在上一篇博客中《iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流》，自定义瀑布流的列数，Cell的外边距，Cell的最大以及最小高度是在我们的布局文件中是写死的，换句话说也就是不可配置的。为了循序渐进，由浅入深呢，上篇博客暂且那么写。不过那样写太过死板，本来使用起来比较灵活的自定义布局，如果把其配置参数给写死了，就相当于在笼中的猛兽，再厉害不也白扯蛮。 在今天这篇博客中我们要接着上篇博客中的Demo，使其自定义布局的属性在使用它
今天逛闲鱼的时候观察到每一行的高度不是相同的，经了解才知道原来这是一种瀑布流布局，感觉挺有意思，于是决定研究一下，在网上也找了一些方案，实现瀑布流大概有3种方式。
刚用 jquery 实现了瀑布流效果。但是其实现方法，我并不满意，所以我还在思考，如何更加简单明了的实现瀑布流效果。与其缠绕在 jquery 里，不如直接跳到 javascript 原生方法里。
谷歌在推出Android5.0的同时推出了一些新控件，Android5.0中最常用的新控件有下面5种。
多个Listview瀑布流效果 效果展示 原理解释 自定义MyLinearLayout，继承至LinearLayout，在布局文件中，将3个listview放置在MyLinearLayout中。 重写
这是一款仿Pinterest网站的简单实用的响应式网格瀑布流布局js插件。该js插件通过简单的CSS和js代码制作出流式布局的网格系统，并通过媒体查询来控制网格的响应式效果。
现在百度图片，360 图片搜索，都是以一种瀑布流的形式展示，那么接下来，分享一波纯 css 瀑布流 和 js 瀑布流
本文从互联网产品设计中的一些思考，关联介绍到信息流，瀑布流和页面元素相关的概念，希望对你有启发
实现的栅格布局效果示意图 需求示意图 确定需求 由上面的需求示意图可知模块的最小单位是正方形，边长是屏幕宽除去边距间隔后的四等份，而每个模块的样式有小正方形(1:1)、大正方形(2:2)、横长方形(2:1)、纵长方形(1:2)，动态的根据服务器下发模块样式绘制布局，可以横向滑动，限定为两行的高度。 注意：上面的示意宽高比是约等于，忽略了间距，计算的时候千万别忘了。 实现思路 由上需求分析可知，我们可以让后台每个模块下发width和height两个字段，字段的值是1或2就行了，然后我们就能根据宽高字
上篇博客的实例是自带的UICollectionViewDelegateFlowLayout布局基础上来做的Demo, 详情请看《iOS开发之窥探UICollectionViewController(二) --详解CollectionView各种回调》。UICollectionView之所以强大，是因为其具有自定义功能，这一自定义就不得了啦，自由度非常大，定制的高，所以功能也是灰常强大的。本篇博客就不使用自带的流式布局了，我们要自定义一个瀑布流。自定义的瀑布流可以配置其参数: 每个Cell的边距，共有多少列，
原文链接：https://www.cnblogs.com/ludashi/p/4826818.html
在css3到来之前，都是用js来操作dom元素，计算位置，大小，形成瀑布流布局。但是有了css3之后，一切实现起来就太简单了，没有复杂的逻辑，轻松的几行样式代码就可以搞定。
随着互联网的发展与短视频等流媒体展示分享方式的普及，如何同时进行多种多媒体文件资源的管理与分类逐渐成为困扰人们进行文件管理的主要问题。本项目为解决上述问题，设计了一款多媒体集成管理器，采用前后端分离的方式，使用 Electron 和 Vue.js 作为前端框架，Springboot 作为后端框架。项目主要模块分为电子书管理模块，图片管理模块以及影视资源管理模块。项目基本功能主要有：文件元数据编辑，文件标签操作，文件夹同步，高级文件搜索，本地文件操作，瀑布流展示，文件分享，应用内预览，页面自动截图，拟物播放器等。最后对系统进行了综合测试与结果分析，结果表明：项目交互性良好，兼容性高，实现了目标功能。具有实际应用意义。
通过 Multi-columns 相关的属性 column-count、column-gap 配合 break-inside 来实现瀑布流布局。
因为这篇文章前戏很长，所以将结果放在了最前面呈现，完整的示例可以前往 https://masonry.daidr.me 查看。
瀑布流页面布局，故名思义就是页面上的元素子项像瀑布一样进行上下紧凑布局，一般图片类网站、电商类或者博客类的网站经常会使用这种布局，使得展示的元素比较紧凑和丰富， 类似下图
经过前五篇系列文章，对Tangram和vlayout也有了初步认识，这篇文章开始将结合业务场景使用，探索框架能力能对业务带来的支持，因为调研本身是一个需要不断踩坑的过程，所以大纲也做了微调，后续会根据实际使用过程发现的问题和解决方案进行更新。
市面上常见的多媒体资源管理器并不少见，比如很有名的本地电子书管理工具-Calibre，图片管理工具-Eagle，以及音频爱好者喜爱的foobar2000。它们在各自的领域内都完美解决了诸多痛点，但人的需求是在不断变化的，互联网的环境也是在不断发生改变的。
一个明晰而高效的开发流程有助于降低项目风险、提高团队协作效率，从而更好地满足用户需求。技术经理需要在软件开发流程中担任领导者的角色，确保团队按照既定的计划和标准推进工作，同时灵活应对变化和挑战。
开门见山，本文介绍响应式的瀑布流的实现方法。 最终效果图如下，改变浏览器大小效果更棒哦~ 以下我们将每个瀑布流盒子简称为box 使用数组记录每个box宽和高 ---- 设置不同屏幕宽度下每一行box的数量 使用$(window).width()获取屏幕宽度 根据不同屏幕宽度设置每一行box的数量 得到每个box的宽度 这里使用最傻的方法计算，有待优化 1 2 3 4 5 6var num = 4; //每行box数量 if ($(window).width() <= 500) num = 1; if
RecyclerView 从诞生至今，因其具有良好的灵活性、可扩展性而深受人们的爱好。目前已经被开发者广泛应用到App中。本文主要针对 RecyclerView 的可扩展性进行详解，将 RecyclerView 玩出新花样 —— 利用 RecyclerView 实现复杂布局。如果你还对 RecyclerView 不熟悉，建议你先把 RecyclerView 的常规用法学习了再来看本文。
转自：http://www.fly63.com/article/detial/1134
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
