说明
1. 瀑布流
-
出现问题: 设计给的图片不是同一个尺寸大小,因此不能规则的放入到给定的DOM结构中.此时,需要使用瀑布流技术来解决这个问题
-
解决的思路: 让图片等宽、不等高
-
核心: 用到了定位
img {
position: absolute;
left: 最小的索引 * 图片的宽度;
top: 最小的图片的高度;
}
- 算法如下:
- 首先获取浏览器的宽度w,用w除以图片盒子的宽度向下取整记为列数: col
- 利用数组,保存每一列当前的高度
- 如果是第一行,则将图片的高度保存在数组arr中
- 如果不是第一行,取出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 * boxWidth
var currTop = currMinHeight
// 将当前的图片变为绝对定位,放在盒子中
$(this).css({
position: 'absolute',
left: currLeft,
top: currTop
})
arr[currMinIndex] = currMinHeight + thisHeight
}
})
}