需求
实现一行多个盒子块元素可以在浏览器窗口改变的时候，根据浏览器视口不同的宽度，响应式改变元素的宽且可自动换行，切尽量不在右侧留白。
注意，要实现此逻辑，首先盒子块元素需要定义一个最大宽和最小宽，才能根据这两个边界值进行计算。
块元素之间有边距。
实现
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>自适应列表</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.item {
min-width: 80px;
max-width: 150px;
height: 100px;
background-color: pink;
margin-right: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div></div>
</div>
<script>
// 元素宽度范围为 80<=width<=150
const margin = 10;
const itemWidth = 150;
const itemMinWidth = 80;
const itemWidthAll = itemWidth margin;
const itemMinWidthAll = itemMinWidth margin;
const itemList = document.getElementsByClassName("item");
window.onresize = adption;
function adption() {
const clientWidth = document.body.clientWidth;
// 按照默认宽度(最大宽度)，当前可以展示item 的个数
const num = Math.floor(clientWidth / itemWidthAll);
// 按照最小可以展示的宽度，可以展示的 item 的个数
const maxNum = Math.floor(clientWidth / (itemMinWidth margin));
// 初始化定义元素的宽
let width = 100 / maxNum "%";
// 按照最大块宽度计算放置个数，剩余的宽度可以至少放置一个最小宽度的块时
const rest = clientWidth - num * itemWidthAll;
console.log("当前视口宽", clientWidth);
console.log("当前视口按最大宽度展示，最少可以展示个数", num);
console.log("当前视口按最小宽度展示，最多可以展示个数", maxNum);
console.log("rest", rest);
if (rest > itemMinWidthAll) {
// console.log("rest剩余空间可放置一个最小宽度元素", rest);
// 放置个数取min 1个可以保证全屏横行全屏放满块
width = 100 / (num 1) "%";
console.log("当前剩余空间大于元素最小可展示宽度,数量 1");
}
Array.from(itemList).forEach((item) => {
item.style.cssText = `width:calc(${width} - ${margin}px)`;
});
}
// 初始化执行一次，进行元素宽度适配
adption();
</script>
</body>
</html>
