原理：瀑布流是将宽度相同，高度不同的元素，以绝对定位的方式把每个元素放在列中最短的位置，铺满整个屏幕，不留空白，最后一行除外。
方法：
①计算元素宽，容器宽，计算出容器一排能够容纳的元素列数；
②创建一个数组，数组的长度等于能够容纳的列数，数组的每一项就是每一列所有元素的累积高度，每一列高度的初始值为0；
③ 遍历数组，比较内容列之间的高度，找到高度最短的列，获取该列最小高度以及对应在数组里的下标。再以绝对定位的方式把元素放到该最短列下面（设置left、top）
④更新该列的高度。就是该列加上后面添加进去元素的高度，计算累积高度写入数组中
⑤监听resize事件，适应屏幕的大小的变化
然后继续寻找所有列的各元素之和的最小者，继续添加至该列上，如此循环下去，直至所有元素均能够按要求排列为止；
1- 实现瀑布流布局效果 瀑布流效果瀑布流代码木桶布局效果木桶布局代码瀑布流布局 2- 实现一个新闻瀑布流新闻...
瀑布流 瀑布流效果代码 木桶布局 木桶布局效果（加载有点慢）代码
title: 瀑布流照片墙布局 瀑布流概念 瀑布流布局是错落式的布局方式。它有一个特点，整个布局以列为单位，下一个...
圣杯布局 瀑布流
瀑布流布局瀑布流jsonp新闻页
题目1： 实现一个瀑布流布局效果 瀑布流 题目2：实现木桶布局效果 木桶布局 题目3：**实现一个新闻瀑布流新闻网...
实现一个瀑布流布局效果 瀑布流
什么是瀑布流： 欣赏 pinterest 样式分析 瀑布流，又被称作为瀑布流式布局，是一种比较流行的网站页面布局方...
1、什么是瀑布流 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚...
先来欣赏三个瀑布流的网站 pinterest 淘宝爱逛街 蘑菇街 什么是瀑布流？ 瀑布流，又称瀑布流式布局。 这种...
本文标题：30.瀑布流布局
本文链接：https://www.haomeiwen.com/subject/aoribttx.html
网友评论