瀑布流布局、木桶布局

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
代码
预览

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、实现一个瀑布流布局效果。 二、实现木桶布局效果。 预览 三、实现一个新闻瀑布流新闻网站。查看效果 jsonp ...
    婷楼沐熙阅读 4,229评论 0 2
  • 1.实现一个瀑布流布局效果 JQ 瀑布流-1 效果 2.实现木桶布局效果 JQ 木桶布局 效果 3.实现一个新闻瀑...
    饥人谷_米弥轮阅读 2,823评论 0 1
  • 题目1: 实现一个瀑布流布局效果 瀑布流 题目2:实现木桶布局效果 木桶布局 题目3:**实现一个新闻瀑布流新闻网...
    大大的萝卜阅读 1,514评论 0 0
  • 题目1 瀑布流布局:代码预览 题目2 木桶布局+懒加载+无限加载图片:代码预览 题目3 新闻瀑布流新闻网站代码 只...
    从前慢pearl阅读 1,696评论 0 0
  • 不知何时起,发现越是努力地学习新知识,就越发现自己无知。开始时,还能够安慰自己说,发现自己无知是好事,可以形成自己...
    黑白镜阅读 1,677评论 4 4