瀑布流

題目1： 實現一個瀑布流布局效果

瀑布流布局

原理：

瀑布流布局，就是一堆等寬不等高的盒子元素，使用絕對定位的方式，根據盒子高度自動放入最短欄隊列排齊。

由于盒子元素寬度固定，根據父容器的寬度，計算一行可以放多少個盒子。用(父元素寬度/盒子寬度)獲得多少列。

新建一個記錄列高度的數組，這個數組存放盒子排列后的每列的高度，列數是這個數組的長度，初始均為0.

遍歷數組，查找數值最小的元素(列高最低)及其下標，將下一個元素放到對應的位置，由于使用絕對定位，距離父容器的top=列高最低的高度，距離父容器的left=每列的寬度*數組的下標（列的個數）

擺放好元素后，更新這個位置的高度，重新遍歷數組，重復上一步操作，直到元素排列完成

題目2 (選做)： 根據課程視頻實現一個新聞瀑布流新聞網站

新聞瀑布流新聞網站

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容