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
在文本框中输入文字，点击搜索后，会出现相应的图片展示。
因为时间关系，还有很多需要优化的地方。
网友评论