1、实现一个瀑布流布局效果
瀑布流原理:
每个元素固定宽度,不固定高度,计算每行列数,遍历一行的每一个元素,找到高度最小的元素,在下方添加新元素,并重新计算该列的高度,监听窗口大小变化事件,动态改变每行列数
性能效率上的注意点:
resize 触发会很频繁,可以将回调函数缓存一段时候后执行,即当这段时间内多次触发了resize事件,但回调函数只会执行一次
这种布局方式非常适合动态加载图片,当滚动条拉到最下面的时候可以通过Ajax动态加载下一轮图片。
代码
预览
2、实现木桶布局效果
每一个图片固定高度
监听load事件,获取图片的宽高,宽高比之类的信息
判断一行是否排满,再按一行一个个添加图片,如果未排满且放不下最后一张,就先按比例拉伸前面的图片占满一行,再将图片放在下一行
3、实现一个新闻瀑布流新闻网站,查看效果49 (选做)
jsonp 接口参数: http://platform.sina.com.cn/slide/album_tech?jsoncallback=func&app_key=1271687855&num=3&page=4
代码
预览