瀑布流布局详解

瀑布流概念:又称瀑布流式布局,是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局,最早采用此布局的是网站是Pinterest,后逐渐在国内流行。

 

瀑布流原理:页面容器内的多个高度不固定的div之间按照一定的间隔参差不齐的无序浮动,鼠标滚动时不断在容器内的尾部加载数据,且自动加载到空缺位置,不断循环。

 

  优点:

1.有效降低了界面复杂度,节省了空间:不再需要臃肿复杂的页面导航链接或者按钮了;

2.在触屏设备上交互方式有更好的用户体验,通过向上滑动进行页面滚动和数据加载,对操作的精准程度要求远远低于点击按钮或者链接;

3.更高的参与度,使用户能更好的专注于浏览而不是操作;

 缺点:

1.无限滚动只适用与特定类型产品中的某一类型,如某类微博信息,购物网站的某类商品,而不适用与一般的门户网站,使用需斟酌;

2.需要打造额外的js库来保证页面数据的加载和排列,而这在一定意义上增加了在网页的性能和设备兼容等方面的问题;

 

         js核心思路:

1.编写方法:获取容器内所有外层元素,存入数组;

2.编写方法:计算容器内一行可以承载多少个元素,方法:容器宽度/元素宽度,四舍五入向下取整;

3.编写方法:把每一行中所有元素的高度值存入数组;

4.编写方法:在高度值数组中找到最小高度值;

5.编写方法:把第二行第一个元素定位到上一行所有元素中高度最低的元素下面,即设置该元素的top,left,position属性;

6.编写方法:重置当前高度值数组中的最小值;

7.编写方法:从第二行第一个元素开始,遍历每个元素,用上述方法重新定位每个元素的位置,把该事件绑定到页面;

8.编写方法:监听鼠标事件,当前容器内最下面一个元素的offsetTop<浏览器可视高度+已滚动高度时,加载下一页数据;

9.加载完之后,用上述方法重新定位新加载元素的位置;

时间: 2024-10-13 00:19:37

瀑布流布局详解的相关文章

瀑布流布局使用详解——JQuery插件Isotope(动态实现子项目筛选)

瀑布流布局,听起来听牛逼的样子,其实就是简单的子元素筛选功能.不过这一功能在网站页面布局当中还是很常用的,特别是在电商网站中 经常会有点一个钮筛选,然后页面的子元素刷的以下变了样.接下来,我们先简单介绍下概念和用法,然后详解这一功能的实现. 瀑布流概念: 又称瀑布流式布局,是比较流行的一种网站页面布局方式.视觉表现为多栏布局,附带筛选功能,当下在国内十分流行. 瀑布流原理: 通过为子元素定义不同的class类名,然后通过类名及其内容进行筛选排序.   这一插件在实现网站元素动态切换,调整整体顺序

详解瀑布流布局的5种实现方式及object-fit

最近项目中需要处理与图片相关的布局,不得不说图片这玩意真想要得到完美的展示效果还真是要费些力气.因为图片的尺寸或者比例各不相同.所以想要不同尺寸的图片有好的显示效果,你就需要找到适合的方式. 而且图片往往是不可或缺元素.毕竟一图胜千言,有时候图片能给带来非常好的效果. 比如我们每天都会使用的表情包,它往往能够表达出我们无法用文字描述的信息,还比如我们经常在公众号里看到的漫画虽然短短几个字,但是却能够让我们看的不亦乐乎. 当然如果我们做图片网站的,那图片的处理就是绕不开的话题了.因对图片的处理经验

wpf 客户端【JDAgent桌面助手】开发详解(三) 瀑布流效果实现与UI虚拟化优化大数据显示

目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]详解(一)主窗口 圆形菜单... wpf 客户端[JDAgent桌面助手]开发详解(二)桌面宠物制作详解 因为前段时候有很多的事情 比较忙,自从上次写完博客之后很久没有更新了. 用WPF制作的京东桌面助手.这个作品是参加比赛的,自己花费了很多心思和时间在里面,最终的作品效果和比赛的结果还是令人满意的. 作品感觉不说很fashion,也足够细致

UICollectionView详解五:瀑布流

前面四个章节,我已经详细的讲解了UICollectionView的使用,这一节,我用一个非常实用的例子"瀑布流"来进一步说明UICollectionView的强大作用. 先分析一下瀑布流的特点: 1. 所有item的宽度是一致的. 2. 所有item应该是等比例缩放的. 3. 所有item的高度应该是通过实际宽度与缩放比例计算而得出的. 4. 要保证每一列的底部的y值均匀分布,不能偏差很大. 5. 瀑布流不是常规的流式布局,所以应该使用UICollectionViewLayout,对U

最完整的瀑布流布局插件开发

内容详解:https://study.163.com/course/introduction/1005668001.htm?share=1&shareId=1142344671 内容介绍:真正意义上的Web前端瀑布流插件,使用简单,功能强大,提供真正的瀑布流布局,自适应布局,无限数据加载等~ 原文地址:https://www.cnblogs.com/xiaoico/p/9249760.html

【Android】RecyclerView详解(一)

1.介绍 RecyclerView是比 ListView 更高级且更具灵活性的组件. 此组件是一个用于显示庞大数据集的容器,可通过保持有限数量的视图进行非常有效的滚动操作. 如果您有数据集合,其中的元素将因用户操作或网络事件而发生改变,请使用 RecyclerView 小组件. RecyclerView使用起来很方便因为它: 提供了一种插拔式的体验,高度的解耦,异常的灵活使用; 显示的样式更丰富包括水平,竖直,Grid,瀑布显示方式; 可以通过ItemDecoration自定义Item间的间隔;

iOS开发——UI篇OC篇&amp;UICollectionView详解+实例

UICollectionView详解+实例 实现步骤: 一.新建两个类 1.继承自UIScrollView的子类,比如HMWaterflowView * 瀑布流显示控件,用来显示所有的瀑布流数据 2.继承自UIView的子类,比如HMWaterflowViewCell * 代表着瀑布流数据中的一个单元(一个格子) 3.总结 HMWaterflowView和HMWaterflowViewCell的关系实际上类似于 UITableView和UITableViewCell的关系 二.设计HMWater

iOS疯狂详解之开源库

youtube下载神器:https://github.com/rg3/youtube-dl vim插件:https://github.com/Valloric/YouCompleteMe vim插件配置:https://github.com/spf13/spf13-vim ----------------Mac完整项目---------- 电台:https://github.com/myoula/sostart ----------------iOS完整项目---------------- 1,

【转】ANDROID自定义视图——onMeasure,MeasureSpec源码 流程 思路详解

原文地址:http://blog.csdn.net/a396901990/article/details/36475213 简介: 在自定义view的时候,其实很简单,只需要知道3步骤: 1.测量——onMeasure():决定View的大小 2.布局——onLayout():决定View在ViewGroup中的位置 3.绘制——onDraw():如何绘制这个View. 而第3步的onDraw系统已经封装的很好了,基本不用我们来操心,只需要专注到1,2两个步骤就中好了. 而这篇文章就来谈谈第一步