瀑布流布局与木桶布局

瀑布流布局

在瀑布流布局中,每一个元素的宽度相同,高度不同,下图中的数字表示图片被添加的顺序,每次添加新的图片时,都将其放在高度最小的一栏,以保证每一栏的高度尽可能相近。

思路
假设我们将一组元素依次添加到某个容器中,每次添加的规则是这样:找到高度最低的列然后将当前元素插入到该列,若有几列的高度一样则从左往右排布;插入完成后更新该列的高度,按如此规则循环,直到所有元素添加到容器中。
通俗来说,我按顺序依次将元素渲染到页面,但它不一定按从左到右依次排列。

瀑布流布局
实现一个瀑布流布局效果

我的实现
我的代码地址

实现一个新闻瀑布流新闻网站

我的代码地址

木桶布局

选定一个基准高度,依次将图片等比压缩至基准高度,然后水平排列,当空间不够放不下了,就将前面水平排列的一行图片等比拉伸至整体宽度刚好充满容器。
最终的结果是,每一行的高度不固定、图片数不同,但图片的总宽度是相同的。

木桶布局

我的实现
我的代码地址

推荐阅读更多精彩内容

  • 1, 实现一个瀑布流布局效果 2, 实现木桶布局效果 3, 实现一个新闻瀑布流新闻网站 查看效果16 (选做题目)...
    HARRISKING阅读 93评论 0 0
  • 1.实现瀑布流布局 瀑布流布布局使用的是绝对定位,窗口中的div的宽度是一样的,但是高度是不同的,排列的方式是每个...
    向前冲冲的蜗牛阅读 246评论 0 0
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 160,067评论 24 690
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 7,608评论 4 42
  • 带走夏天的姑娘 不要这么匆忙 飞鸟经过的天空 这蓝色依然很空旷 带走夏天的姑娘 不要这么匆忙 九月的风挂满铃铛 我...
    蓝小嗨阅读 253评论 0 2
  • PPT学习班刚结束,今天的深圳一直下雨,来到深大都没有拍一张照片就匆匆离开了,找地方安置行李,出去转了一圈被困在日...
    车前小草阅读 78评论 0 0
  • 今晚从广州坐火车上武汉,有几个想法不得不提。1 火车站长途中转站没有明显中转取票售票提示,不得不要兜一大圈到另外一...
    在对的时间做对的事阅读 56评论 0 0
  • 虽然我来自比较偏文科的社会学院,但其实我的文笔是有点烂的,可能是想到啥说啥惯了,所以写文章时多半也是想到啥写...
    shadowswind阅读 82评论 0 0
  • (1) 和大多数正在为高考奋斗的人一样,当年的我一面吐槽中国的应试教育一面默默接受这个“残酷”的现实,投身于题海中...
    591ed23e7e2d阅读 267评论 2 0