css+js 实现一行多个盒子块元素响应式布局
需求
实现一行多个盒子块元素可以在浏览器窗口改变的时候，根据浏览器视口不同的宽度，响应式改变元素的宽且可自动换行，切尽量不在右侧留白。
注意，要实现此逻辑，首先盒子块元素需要定义一个最大宽和最小宽，才能根据这两个边界值进行计算。
块元素之间有边距。
实现
<!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>
