思路分析:
定位后确定浏览器显示区域内,一行能放多少列图片盒子
- 获取页面的宽度
- 获取图片盒子的宽度
- 显示的列数=页面宽度/图片盒子宽度
- column=pageWidth/itemWidth
显示美观一般都会加一个空隙
- 显示的列数=页面宽度/(盒子宽度+间隙)
- column=pageWidth/(itemWidth+gap)
确定列数之后,排列第一行
- 下面还有很多图片盒子,我们先要排列第一行,所以在for循环里要判断下,当i(所有图片盒子的索引)<column(显示列数)时,说明在第一行;
- 知道第一行后,动态设置每个图片盒子的left值就能排好第一行
- left=i*(itemWidth+gap)
第一行排列好之后,获取第一行所有图片盒子的高度
- 需要定义一个数组arr,将获取到的高度存在数组中,因为第二行排列的时候需要考虑top值,此时只能根据第一行图片盒子的高度来设置
- 获取图片高度的时候要注意,程序必须写在入口函数onload里面,因为图片的加载特性是:等页面加载完之后采取请求加载,所以不写在入口函数里可能会出现高度获取不到的情况
排列第二行
- 获取到刚刚数组中,高度最小的那一列,将第二行的第一个图片盒子放置在它的下方
- 此时的left值就是高度最小的offsetLeft;top值就是:第一行高度最小列的高度
- 记录下高度最小列的索引index,后面计算会用到
- 设置完成之后,会发现后面所有的图片都叠在这个高度最小列的小面,原因就是此时的最小咧高度没有改变,应该加上下面图片的高度,得出一个新高度
改变最小列当前的高度
- 此时的这一列高度其实已经发生改变了,所以需要将新高度赋值给数组
- 当前高度最小列的高度=当前高度最小列高度+间隙+下面盒子高度
HTML代码如下:
<div class="box">
<div class="section"><img src="./img/1.jpg" alt=""></div>
<div class="section"><img src="./img/2.jpg" alt=""></div>
<div class="section"><img src="./img/3.jpg" alt=""></div>
<div class="section"><img src="./img/4.jpg" alt=""></div>
<div class="section"><img src="./img/5.jpg" alt=""></div>
<div class="section"><img src="./img/6.jpg" alt=""></div>
<div class="section"><img src="./img/7.jpg" alt=""></div>
<div class="section"><img src="./img/8.jpg" alt=""></div>
<div class="section"><img src="./img/9.jpg" alt=""></div>
<div class="section"><img src="./img/10.jpg" alt=""></div>
<div class="section"><img src="./img/11.jpg" alt=""></div>
<div class="section"><img src="./img/12.jpg" alt=""></div>
<div class="section"><img src="./img/13.jpg" alt=""></div>
<div class="section"><img src="./img/14.jpg" alt=""></div>
<div class="section"><img src="./img/15.jpg" alt=""></div>
</div>
js代码如下:
window.onload = function() {
var items = document.querySelector('.box').querySelectorAll('.section')
// console.log(items);
var gap = 10
// 获取浏览器页面的宽度
var pageWidth = document.documentElement.clientWidth || document.body.clientWidth
// console.log(pageWidth);
// 获取第一个图片的宽度
var itemWidth = items[0].offsetWidth
console.log(itemWidth);
// 一行放几张图片
var column = parseInt(pageWidth / (itemWidth + gap))
var arr = []
for(var i = 0; i < items.length; i++) {
// 判断是否是第一行
if(i < colums) {
items[i].style.top = 0
items[i].style.left = (itemWidth + gap) * i + 'px'
arr.push(items[i].offsetHeight)
} else {
var minHeight = arr[0]
var index = 0
for(var j = 0; j < arr.length; j++) {
if(minHeight > arr[j]) {
// 取出数组中最矮盒子的高度
minHeight = arr[j]
// 取出数组中最矮盒子的索引
index = j
}
}
// 第一行外盒子的位置
items[i].style.position = 'absolute'
items[i].style.top = arr[index] + gap + 'px'
items[i].style.left = items[index].offsetLeft + "px"
// 更新高度
arr[index] = arr[index] + items[i].offsetHeight + gap
}
}
}