1.瀑布流的布局，要求布局的元素是等寬的，瀑布流布局的特點就是等寬不等高，然後計算元素的寬度和瀏覽器螢幕寬度的比值，確定出列數
2.建立乙個陣列，這個陣列用於儲存第一行的各個高度
3.計算出這個陣列中最小的元素，接下來的通過定位的方式布局到高度最小的下面，
4.最後將這個最小高度進行更新，然後一直迴圈地布局下去
$(window).on("load", function () )
function watchfall() else )
//更新最小的高度
heightarr[minindex] += imgheight
// console.log(heightarr)}})
}
原生JS實現瀑布流布局
一.瀑布流之準備工作 首先宣告下,為了方便演示和聯絡,我使用的是本地,如果大家有需要的話可以嘗試著寫下網路的,不過本地和遠端的大致是相同的.那麼我就來簡單介紹下本地的瀑布流效果吧,我們要先準備好 張,當然啦,我們實現的是瀑布流效果,所以最好是高度不相同的,這樣才可以看出來效果,對吧,嘿嘿.二.的準備...
實現瀑布流布局
瀑布流，又稱瀑布流式布局。是比較流行的一種 頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷載入資料塊並附加至當前尾部，瀑布流的主要特性便是錯落有致，定寬而不定高的設計讓頁面區別於傳統的矩陣式布局模式。主體思路是記錄每一列的高度，父容器相對定位，成員絕對定位，利用to...
通過原生JS實現瀑布流布局
由於工作需要，花了幾天時間研究瀑布流布局。該布局可以使用原生js jquery 以及css3來實現，目前的工作場景不允許使用css3 主要是ie 所以本文主要針對原生js。一 需要掌握的知識點 document.body 與 document.documentelement的相容性 var html...