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


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


         优点:

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

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

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

         缺点:

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

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


         js核心思路:

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

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

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

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

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

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

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

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

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