任务30 - 瀑布流布局

问答

瀑布流布局的原理是什么

  • 瀑布流布局要求要进行布置的元素等宽，然后计算元素的宽度与浏览器宽度之比，得到需要布置的列数。
  • 创建一个数组，长度为列数，里面的值为已布置元素的总高度（最开始为0）
  • 然后将未布置的元素依次布置到高度最小的那一列，就得到了瀑布流布局。

代码

瀑布流布局：
代码、预览

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

推荐阅读更多精彩内容

  • 30.瀑布流布局
    问答 1.瀑布流布局的原理是什么 原理：瀑布流是将宽度相同，高度不同的元素，以绝对定位的方式把每个元素放在列中最短...
    鸿鹄飞天阅读 1,664评论 0赞 0
  • 任务30-瀑布流布局
    问答 1.瀑布流布局的原理是什么？ 对于瀑布流，其本质是定宽不定高的列原理： 获取当前视窗的宽度，计算出当前宽度能...
    小木子2016阅读 1,586评论 0赞 0
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1赞 92
  • 常见 CSS 布局方式
    前言 温馨提示：本文较长，图片较多，本来是想写一篇 CSS 布局方式的，但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 8,350评论 0赞 59
  • 寒门出贵子，难，难，难！
    前几天在简书上看到一篇关于农村大学生的文章，虽然我不是农村大学生中的一员，但是我的所见所闻，却让我对农村大学生的艰...
    夕夕酱阅读 3,283评论 0赞 2