原理：
1.瀑布流里的元素宽度都相同，用窗口宽度除以一个元素的宽度得到每行能容纳的列数。
2.创建一个空数组，用来储存每列中所有元素相加的高度。
3.先把第一行的元素的高度存储进数组。利用遍历的方法得到第一行高度最小的元素以及这个元素在数组中的索引数（index）。
4.对下一个元素使用绝对定位，将其放在上一步选中的高度最小元素的下面（top值为上一步选中元素的高度，left值为选中元素距离窗口的宽度）。
5.当元素绝对定位完成之后，将其高度和原来数组中最小的高度相加，利用之前得到的索引号更新数组。
6.这样在不断的遍历数组中，完成了所有元素的定位，达到了瀑布流的效果。
本文版权归本人和饥人谷所有，转载请注明来源。
1- 实现瀑布流布局效果 瀑布流效果瀑布流代码木桶布局效果木桶布局代码瀑布流布局 2- 实现一个新闻瀑布流新闻...
瀑布流 瀑布流效果代码 木桶布局 木桶布局效果（加载有点慢）代码
title: 瀑布流照片墙布局 瀑布流概念 瀑布流布局是错落式的布局方式。它有一个特点，整个布局以列为单位，下一个...
圣杯布局 瀑布流
瀑布流布局瀑布流jsonp新闻页
题目1： 实现一个瀑布流布局效果 瀑布流 题目2：实现木桶布局效果 木桶布局 题目3：**实现一个新闻瀑布流新闻网...
实现一个瀑布流布局效果 瀑布流
什么是瀑布流： 欣赏 pinterest 样式分析 瀑布流，又被称作为瀑布流式布局，是一种比较流行的网站页面布局方...
1、什么是瀑布流 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚...
先来欣赏三个瀑布流的网站 pinterest 淘宝爱逛街 蘑菇街 什么是瀑布流？ 瀑布流，又称瀑布流式布局。 这种...
本文标题：瀑布流布局
本文链接：https://www.haomeiwen.com/subject/vpljpttx.html
网友评论