思路
- 页面布局为:图片容器盒子相对定位,其中的所有图片绝对定位
- 定义一个布局函数,在页面加载时以及窗口大小发生变化时调用该函数
- 列数为:图片外层盒子宽度/图片实际所占宽度(图片宽度+边框+内外边距)
- 每列的高度存放在一个数组中,数组的长度即为列数
- 遍历所有图片集合,给每一张图片定位
- 找出数组中最小值对应的索引,即为高度最小的列
- 该图片的left值设为:高度最小的列数*图片实际所占宽度
- 该图片的top设为:高度最小的列的高度
- 该图片定位完毕后,将该图片的实际所占高度添加到之前高度最小的列中
代码实现
-
布局实现
<!--布局相对很简单,图片容器设为相对定位,所有图片放在容器中,设为绝对定位--> <div class="waterfall"> <img src="ava01.jpg" alt=""> <img src="bg01.jpg" alt=""> <img src="bg02.jpg" alt=""> <img src="bg03.jpg" alt=""> <img src="bg04.jpg" alt=""> <img src="bg04.jpg" alt=""> ....... </div>
-
功能实现
// 当页面加载或窗口大小改变,调用设置布局函数 $(window).load(setLayOut); $(window).resize(setLayOut); // 定义设置瀑布流布局方法,当页面加载或窗口大小改变时调用该方法 function setLayOut() { // 获取列数 var cols = parseInt($('.waterfall').width() / $('img').outerWidth(true)); // 定义存放每一列的高度的数组 var colsHeight = []; // 根据列数初始化每一列高度为0 for (var i = 0; i < cols; i++) { colsHeight[i] = 0; } // 设置每张图片的位置 $('img').each(function () { // 计算高度最小的列数和高度 var minHeight = colsHeight[0]; var min = 0; for (var i = 1; i < colsHeight.length; i++) { if (colsHeight[i] < minHeight) { minHeight = colsHeight[i]; min = i; } } // 为图片设置样式 $(this).css({ top: minHeight, left: min * $('img').outerWidth(true) }); // 为当前列增加高度 colsHeight[min] += $(this).outerHeight(true); }) }