瀑布流布局详解

落日映苍穹つ 2022-03-22 12:59 358阅读 0赞

*  [博客园][Link 1]
 *  [首页][Link 2]
 *  [新随笔][Link 3]
 *  [联系][Link 4]
 *  [订阅][Link 5]
 *  [管理][Link 6]

随笔 - 1  文章 - 0  评论 - 0

# [瀑布流布局详解][Link 7] #

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

** **

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

** **

**  优点：**

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

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

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

** 缺点：**

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

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

** **

**         js核心思路：**

1.编写方法：获取容器内所有外层元素，存入数组；

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

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

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

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

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

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

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

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

[Link 1]: https://www.cnblogs.com/
[Link 2]: https://www.cnblogs.com/zhnnp/
[Link 3]: https://i.cnblogs.com/EditPosts.aspx?opt=1
[Link 4]: https://msg.cnblogs.com/send/%E7%82%99%E8%A8%80
[Link 5]: https://www.cnblogs.com/zhnnp/rss
[Link 6]: https://i.cnblogs.com/
[Link 7]: https://www.cnblogs.com/zhnnp/p/5483298.html

发表评论取消回复

表情：

评论列表（有 0 条评论，358人围观）

还没有评论，来说两句吧...

相关阅读

相关原生瀑布流布局

下载插件 [http://tk.shangpreechina.com/themes/Ewdade/default/js/modernizr.js][http_tk.shangp

梦里梦外;/ 2023年09月29日 11:06/ 0 赞/ 15 阅读

相关 iOS瀑布流布局

前言瀑布流布局是比较流行的一种网站页面和手机App布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局

太过爱你忘了你带给我的痛/ 2022年06月17日 06:10/ 0 赞/ 563 阅读

相关瀑布流布局JavaScript实现

html代码 <div id="content"> <!-- <div> <img src="img/1.jpg">

我就是我/ 2022年05月27日 12:30/ 0 赞/ 311 阅读

相关 js 原生瀑布流布局，瀑布流布局

HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="

左手的ㄟ右手/ 2022年05月16日 08:41/ 0 赞/ 310 阅读

相关 js实现瀑布流布局

我个人不太喜欢这种布局、但需求还是有的、只能实现。查阅了资料找到两种方式：第一种： <!DOCTYPE html> <html> <head

骑猪看日落/ 2022年04月23日 11:04/ 0 赞/ 308 阅读

相关 jquery瀑布流布局

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery瀑布流布局</title>

柔光的暖阳◎/ 2022年04月22日 05:34/ 0 赞/ 313 阅读

相关瀑布流布局详解

[博客园][Link 1] [首页][Link 2] [新随笔][Link 3] [联系][Link 4] [订阅][Link 5] [管理

落日映苍穹つ/ 2022年03月22日 12:59/ 0 赞/ 359 阅读

相关瀑布流布局

1、点击取消就刷新，防止模板不刷新导致bug 2、循环元素，if(第一排) else(其他排) 3、数组arr存放第一排高度 4、获取arr最小值height以及索

喜欢ヅ旅行/ 2022年01月07日 18:45/ 0 赞/ 362 阅读

相关小程序瀑布流布局

微信小程序开发交流qq群 581478349 微信：承接小程序开发 ![70][]![watermark_type_ZmFuZ3poZW5naGVpdGk

青旅半醒/ 2021年09月17日 12:14/ 0 赞/ 408 阅读

相关什么是瀑布流布局？瀑布流布局的实现方法

网页在进行布局的时候，有时会用到一种布局方式叫做瀑布流布局，那么，瀑布流布局是什么样的呢？本篇文章将来给大家介绍一下关于瀑布流布局的实现方法。首先我们来看一下瀑布流布...

小灰灰/ 2021年02月01日 17:15/ 0 赞/ 843 阅读