瀑布流佈局詳解

         瀑布流概念：又稱瀑布流式佈局，是比較流行的一種網站頁面佈局方式。視覺表現爲良莠不齊的多欄佈局，最先採用此佈局的是網站是Pinterest，後逐漸在國內流行。

 

         瀑布流原理：頁面容器內的多個高度不固定的div之間按照必定的間隔良莠不齊的無序浮動，鼠標滾動時不斷在容器內的尾部加載數據，且自動加載到空缺位置，不斷循環。

 

         優勢：

                1.有效下降了界面複雜度，節省了空間：再也不須要臃腫複雜的頁面導航連接或者按鈕了； 

                2.在觸屏設備上交互方式有更好的用戶體驗，經過向上滑動進行頁面滾動和數據加載，對操做的精準程度要求遠遠低於點擊按鈕或者連接；

                3.更高的參與度，使用戶能更好的專一於瀏覽而不是操做；

         缺點：

                1.無限滾動只適用與特定類型產品中的某一類型，如某類微博信息，購物網站的某類商品，而不適用與通常的門戶網站，使用需斟酌；

                2.須要打造額外的js庫來保證頁面數據的加載和排列，而這在必定意義上增長了在網頁的性能和設備兼容等方面的問題；

 

         js核心思路：

                1.編寫方法：獲取容器內全部外層元素，存入數組；

                2.編寫方法：計算容器內一行能夠承載多少個元素，方法：容器寬度/元素寬度，四捨五入向下取整；

                3.編寫方法：把每一行中全部元素的高度值存入數組；

                4.編寫方法：在高度值數組中找到最小高度值；

                5.編寫方法：把第二行第一個元素定位到上一行全部元素中高度最低的元素下面，即設置該元素的top，left，position屬性；

                6.編寫方法：重置當前高度值數組中的最小值；

                7.編寫方法：從第二行第一個元素開始，遍歷每一個元素，用上述方法從新定位每一個元素的位置，把該事件綁定到頁面；

                8.編寫方法：監聽鼠標事件，當前容器內最下面一個元素的offsetTop<瀏覽器可視高度+已滾動高度時，加載下一頁數據；

                9.加載完以後，用上述方法從新定位新加載元素的位置；