1.實現(xiàn)瀑布流布局
瀑布流布布局使用的是絕對定位，窗口中的div的寬度是一樣的，但是高度是不同的，排列的方式是每個div會選取上一行中高度最小的來排列。
實現(xiàn)的思路 1 創(chuàng)建一個數(shù)組，數(shù)組的個數(shù)是 窗口的寬度/每個div的寬度
2 數(shù)組中的值存取的是 每列div盒子的高的和
3 div在排列的時候，會從數(shù)組中找出高度最小的值minHight，
4 在數(shù)組中找出minHight所在的位置index（即第index列）
5 排列div的top為minHight，left則為div的寬度*index。
優(yōu)化的點:當窗口發(fā)生變化的時候，列數(shù)也會發(fā)生變化，界面也要重新排列
窗口變化的事件是（resize）
代碼地址：https://github.com/HappyXll/WEB-KNOWLEDGE/blob/master/water-flow/waterflow.html
代碼展示地址：https://happyxll.github.io/WEB-KNOWLEDGE/water-flow/waterflow.html
2.瀑布流+懶加載實現(xiàn)新聞加載
代碼展示地址：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
優(yōu)點是通過了圖片的預加載，控流的功能，
缺點是每次圖片加載完成后才能去拼接成html節(jié)點，希望改進的地方是通過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
在文本框中輸入文字，點擊搜索后，會出現(xiàn)相應的圖片展示。
因為時間關(guān)系，還有很多需要優(yōu)化的地方。
