瀑布流布局详解

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

 

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

 

         优势：

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

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

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

         缺点：

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

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

 

         js核心思路：

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

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

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

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

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

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

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

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

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