1.實現瀑布流布局

瀑布流布布局使用的是絕對定位，窗口中的div的寬度是一樣的，但是高度是不同的，排列的方式是每個div會選取上一行中高度最小的來排列。
實現的思路 1 創建一個數組，數組的個數是 窗口的寬度/每個div的寬度
2 數組中的值存取的是 每列div盒子的高的和
3 div在排列的時候，會從數組中找出高度最小的值minHight，
4 在數組中找出minHight所在的位置index（即第index列）
5 排列div的top為minHight，left則為div的寬度*index。
優化的點:當窗口發生變化的時候，列數也會發生變化，界面也要重新排列
窗口變化的事件是（resize）
代碼地址：https://github.com/HappyXll/WEB-KNOWLEDGE/blob/master/water-flow/waterflow.html
代碼展示地址：https://happyxll.github.io/WEB-KNOWLEDGE/water-flow/waterflow.html

2.瀑布流+懶加載實現新聞加載

代碼展示地址：https://happyxll.github.io/WEB-KNOWLEDGE/cask-layout/lazyload-waterfull-ajax.html
代碼地址：https://github.com/HappyXll/WEB-KNOWLEDGE/blob/master/cask-layout/lazyload-waterfull-ajax.html
優點是通過了圖片的預加載，控流的功能，
缺點是每次圖片加載完成后才能去拼接成html節點，希望改進的地方是通過jQuery的Deferred對象來讓所有圖片加載后再去渲染。而不是一張圖片加載好了就去渲染。

3.木桶布局
每一行中各個元素的寬度不同，元素高度相同，各行的總寬度相同
代碼地址：https://github.com/HappyXll/WEB-KNOWLEDGE/blob/master/cask-layout/casklayout.html
代碼演示地址：https://happyxll.github.io/WEB-KNOWLEDGE/cask-layout/casklayout.html

image.png

在文本框中輸入文字，點擊搜索后，會出現相應的圖片展示。
因為時間關系，還有很多需要優化的地方。