軟件開發中你一定知道瀑布模型，但是你知道軟件開發中瀑布流嗎？在WEB開發有一個瀑布流你知道嗎？
在講解瀑布流之前，我們先來看一個瀑布流在網站中的實際應用。
瀑布流
例如上面的樣式，如何來寫更簡單呢？我們一個元素一個元素的來寫其實可以實現，但是很麻煩，你可以試想一下加入有幾十個類似這樣的圖片及其描述，那不是要寫幾十個樣式，如何能夠簡單快速完成樣式呢？
我們可以使用瀑布流，什麼是瀑布流呢？就是所有的子元素寬度一樣，只是高度不一樣，排列在一個父元素中。那如何來實現呢？
首先，確定父元素的寬度，子元素的寬度，確定每一行可以放幾個子元素和子元素之間的間隔。
其次，創建一個數組，數組長度等於每一行子元素的個數，數組元素的默認值為0，數組的作用就是用來存放子元素的高度之和，然後用於規定每個元素垂直方向顯示的位置。
再次，排列第一行子元素後，數組分別存放對應列的子元素的高度加上元素垂直間距；排列第二行子元素後，數組元素值再原有基礎上加上第二行對應列元素的高度和元素垂直間距，依次類推。
最後，元素使用絕對定位，每個元素的水平位置x=元素列索引值n×（元素寬度width+元素之間間隙mwidth），每個元素的垂直位置y=對應數組元素列的高度。
瀑布流簡單描述
瀑布流案例顯示效果
瀑布流顯示效果
瀑布流案例源代碼
源代碼
分享到:
閱讀更多 科技奇幻 的文章
