说明

• 源代码

---

1. 瀑布流

• 出现问题: 设计给的图片不是同一个尺寸大小,因此不能规则的放入到给定的DOM结构中.此时,需要使用瀑布流技术来解决这个问题

• 解决的思路: 让图片等宽、不等高

• 核心: 用到了定位

img {position: absolute;left: 最小的索引 * 图片的宽度;top: 最小的图片的高度;
}

• 算法如下:

1. 首先获取浏览器的宽度w,用w除以图片盒子的宽度向下取整记为列数: col
2. 利用数组,保存每一列当前的高度
3. 如果是第一行,则将图片的高度保存在数组arr中
4. 如果不是第一行,取出arr中的最小值和索引,计算出绝对定位的位置.并给图片设置绝对定位

1.1 用到的API

1.1.1 获取当前屏幕的宽度

• 由于每个图片盒子还有对应的高度,因此获取的时候,还要获取内边距.
• 在jquery中,可以通过$().outerWidth实现

var screenWidth = $(window).outerWidth()

1.1.2 给DOM元素加css样式

$().css({position: 'absolute',left: currLeft,top: currTop
})

1.1.3 总体代码

• 总体代码如下:

$(function() {waterFall()
})
function waterFall() {// 获取盒子var box = $('.box')// 1. 求出对应得列数// 1.1 得到当前屏幕的宽度var screenWidth = $(window).outerWidth()// 1.2 获取每张图片的宽度var boxWidth = $('.box').outerWidth()// 1.3 获取当前的列数var col = Math.floor(screenWidth / boxWidth)// 2. 创建数组,记录当前列数的高度var arr = []for (var i = 0; i < col; i++) {arr.push(0)}// 3. 遍历盒子中的图片$.each(box, function(index, value) {// 得到每一张图片的高度var thisHeight = $(this).height()if (index < col) {// 如果是第一行将高度的存入数组中.arr[index] = thisHeight} else {// 如果不是第一行,找到数组中最小的高度和索引var currMinHeight = Math.min.apply(arr, arr)var currMinIndex = arr.indexOf(currMinHeight)// 算出距离 左侧/上侧 的距离var currLeft = currMinIndex * boxWidthvar currTop = currMinHeight// 将当前的图片变为绝对定位,放在盒子中$(this).css({position: 'absolute',left: currLeft,top: currTop})arr[currMinIndex] = currMinHeight + thisHeight}})
}