美文网首页
30.瀑布流布局

30.瀑布流布局

作者: 鸿鹄飞天 | 来源:发表于2017-01-20 15:40 被阅读21次

问答

1.瀑布流布局的原理是什么

原理:瀑布流是将宽度相同,高度不同的元素,以绝对定位的方式把每个元素放在列中最短的位置,铺满整个屏幕,不留空白,最后一行除外。
方法:
①计算元素宽,容器宽,计算出容器一排能够容纳的元素列数;
②创建一个数组,数组的长度等于能够容纳的列数,数组的每一项就是每一列所有元素的累积高度,每一列高度的初始值为0;
③ 遍历数组,比较内容列之间的高度,找到高度最短的列,获取该列最小高度以及对应在数组里的下标。再以绝对定位的方式把元素放到该最短列下面(设置left、top)
④更新该列的高度。就是该列加上后面添加进去元素的高度,计算累积高度写入数组中
⑤监听resize事件,适应屏幕的大小的变化
然后继续寻找所有列的各元素之和的最小者,继续添加至该列上,如此循环下去,直至所有元素均能够按要求排列为止;

代码

1.实现如下瀑布流布局

预览
demo

相关文章

  • 瀑布流布局 的学习

    1- 实现瀑布流布局效果 瀑布流效果瀑布流代码木桶布局效果木桶布局代码瀑布流布局 2- 实现一个新闻瀑布流新闻...

  • 瀑布流、木桶布局

    瀑布流 瀑布流效果代码 木桶布局 木桶布局效果(加载有点慢)代码

  • 瀑布流照片墙布局

    title: 瀑布流照片墙布局 瀑布流概念 瀑布流布局是错落式的布局方式。它有一个特点,整个布局以列为单位,下一个...

  • CSS经典布局

    圣杯布局 瀑布流

  • 瀑布流

    瀑布流布局瀑布流jsonp新闻页

  • 瀑布流布局_木桶布局

    题目1: 实现一个瀑布流布局效果 瀑布流 题目2:实现木桶布局效果 木桶布局 题目3:**实现一个新闻瀑布流新闻网...

  • 瀑布流和懒加载结合

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

  • 瀑布流

    什么是瀑布流: 欣赏 pinterest 样式分析 瀑布流,又被称作为瀑布流式布局,是一种比较流行的网站页面布局方...

  • 瀑布流

    1、什么是瀑布流 瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚...

  • 瀑布流的三种实现

    先来欣赏三个瀑布流的网站 pinterest 淘宝爱逛街 蘑菇街 什么是瀑布流? 瀑布流,又称瀑布流式布局。 这种...

网友评论

      本文标题:30.瀑布流布局

      本文链接:https://www.haomeiwen.com/subject/aoribttx.html