瀑布流布局详解

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

 

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

 

         优点:

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

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

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

         缺点:

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

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

 

         js核心思路:

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

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

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

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

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

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

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

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

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

        

转载于:https://www.cnblogs.com/zhnnp/p/5483298.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值