一、问题引入
今天实习遇到了一个问题：页面中有许多小卡片，容器被设置生成弹性盒子，并且水平方向设置为 justify-content: space-around;👈🏻
效果就例如下面这样：⚡
image
很明显：最后一行挺难看的😅，真正要显示的效果是这样的：🥰
image
刚开始我的想法就是水平轴不设置，让其自适应，然后通过控制卡片的外边距来控制。
实操后，确实能够实现。🤙🏻
结果问题来：当我屏幕放大时，布局又乱了。😅
image
因为✍🏻水平轴我没有设置其对齐方式，仅仅通过外边距来控制，外边距被我写死了。
而屏幕的宽度是不断变化的，因此只能将卡片的外边距动态设置。😅
但这样很复杂。
最终想到：<font color="red">我可以在最后一行添加几个卡片（假卡片），这样布局不就不会乱了吗？</font > 🔥
二、解决方法
首先：必须知道容器设置为 justify-content: space-around;的意思是什么？
它的意思是：<font color="red">容器中的卡片左右外边距都相等</font>（这个是关键）
image
更加图片可以得到：⚡公式：
c = （b + 2a）* 一行显示的卡片数
在实际中，我们就是通过计算一行显示多少张卡片，最终将最后一行补齐。👈🏻
上代码：
<style>
.container {
width: 100%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
padding: 10px;
box-sizing: border-box;
min-width: 700;
}
.container .card {
width: 340px;
height: 340px;
margin-bottom: 12px;
}
.container .card .card-container {
position: relative;
width: 100%;
height: 100%;
border-radius: 12px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}
.container .card .card-container span {
position: absolute;
display: block;
width: 120px;
height: 120px;
border-radius: 50%;
margin: auto;
background-color: #333;
color: #fff;
line-height: 120px;
font-weight: bolder;
text-align: center;
font-size: 40px;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
<div class="container">
<div class="card">
<div class="card-container">
<span>1</span>
</div>
</div>
<div class="card">
<div class="card-container">
<span>2</span>
</div>
</div>
<div class="card">
<div class="card-container">
<span>3</span>
</div>
</div>
<div class="card">
<div class="card-container">
<span>4</span>
</div>
</div>
<div class="card">
<div class="card-container">
<span>5</span>
</div>
</div>
<div class="card">
<div class="card-container">
<span>6</span>
</div>
</div>
<div class="card">
<div class="card-container">
<span>7</span>
</div>
</div>
<div class="card">
<div class="card-container">
<span>8</span>
</div>
</div>
<div class="card">
<div class="card-container">
<span>9</span>
</div>
</div>
<div class="card">
<div class="card-container">
<span>10</span>
</div>
</div>
</div>
重点来了：💪🏻
// 真实卡片张数
var realNum = 0;
window.onload = function () {
// 获取真实卡片的张数
realNum = document.querySelectorAll(".container .card").length;
dealContainer();
};
window.addEventListener("resize", function () {
dealContainer();
});
function dealContainer() {
// 获取容器中所有卡片 （有真有假）
var cardList = document.querySelectorAll(".container .card");
// 移除假卡片
for(var j = realNum; j < cardList.length; j++) {
cardList[j].remove();
}
// 获取第一个卡片距离左边的距离
var distance = cardList[0].offsetLeft;
// 获取浏览器的宽度
var w =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
// 计算每个盒子在页面所占的宽度
var cardWidth = cardList[0].clientWidth + 2 * distance;
// 计算出当前浏览器一行显示多少个卡片
var num = Math.ceil(w / cardWidth);
// 计算容器中最后一行的显示多少个盒子
var last = realNum % num;
// 补齐最后一行
for (var j = last == 0 ? num : last; j < num; j++) {
var card = document.createElement("div");
card.className = cardList[0].className;
document.querySelector(".container").appendChild(card);
}
}
最终在不同屏幕的显示效果如下：
image
image
而且这里不用考虑说：不断拉伸页面会导致容器添加过多卡片（假），从而导致容器被撑大。🥰
在进行计算时，我已经将上一步操作添加的卡片（假）给移除掉，这就保证只补齐容器最后一行的卡片。
