瀑布流佈局實現的三種方式

哈哈哈 夜晚纔是寫博客的好時間。 0.0 ——–HANK

---

1. 瀑布流佈局的特點？
   答：首先，是圖片的寬度固定，圖片的長度不一樣。其次，是當頁面滾動時 ，會再次加載數據，動態的渲染在頁面上。

2. 瀑布流佈局的原理？
   首先，獲取圖片的固定的寬度W，網頁body的clientWidth
   其次，獲取在你的版面中顯示多少列圖片。cols = clientHeight / W;
   然後，把前cols的offsetHeight存在一個數組arr中，其他的用else
   {
   do something………….
   }處理
   繼續，是把接下來的圖片放在數組arr中最小的那一項下面（說白啦，就是那列短，放在那一列），同時設置一系列的css樣式。
   最後加載從服務器弄來的數據，並處理渲染到頁面上就行。

---

下面是對於“瀑布流”實現的三種方式的敘述以及實踐截圖

1.原生Javascript實現瀑布流
核心代碼:

2.JQuery實現的瀑布流佈局

3.利用CSS3的屬性來設置
說白啦就是利用一個屬性進行設置：column來設置就行，
缺點：就是無法做到控制他們之間的間距。

---

效果圖：

---

結構層圖：

樣式圖：

最後我想說的是：建議大家可以去慕課網上去學習視頻教程—瀑布流佈局