js实现行内多个元素动态均匀分布

最新推荐文章于 2023-10-23 14:18:18 发布

haoyanyu_

最新推荐文章于 2023-10-23 14:18:18 发布

阅读量1.6k

点赞数

分类专栏：日常总结 css js

本文链接：https://blog.csdn.net/haoyanyu_/article/details/109181444

版权

博客介绍了如何在JavaScript中实现行内多个元素动态均匀分布，特别是在商品展示场景下。文章通过对比原flex布局方案，提出使用浮动和动态计算元素间距的新思路，以适应不同浏览器宽度。核心代码展示了在React中应用此方法，同时提到了一个关于滚动条导致的布局问题及其解决方案。

摘要由CSDN通过智能技术生成

需求背景

平台首页有选货市场，商品大图展示时，要求根据浏览器宽度均匀排布。
即浏览器宽度不同，一行展示的商品数量不同，通过改变外边距，让商品均匀填充满容器盒子。

原实现方案

通过css的flex布局和justify-content: space-between让商品元素均匀排布。效果如下：

可见，当商品铺差不多够满了一行时展示效果是ok的，不足一行时，就会有问题。

新思路

不再用flex布局，使用float浮动，让商品元素一行展示；
根据父容器的宽度，计算出一行可以展示的数量 n;
计算每个商品的margin-right的值newMarginRight, 通过js动态设置；
父元素margin-right：- newMarginRight确保每行填充满；

核心代码

react代码

const GOODS_CARD_WIDTH = 250; // 每个卡片的固定宽度
const MIN_MARGIN_RIGHT = 14; // 最小的margin-right值
const GOODS_NUM_INLINE = 4; // 一行最少展示的商品数量
class GoodsCardList extends React.Component {
   
	// 计算方法
	private calcCardMarginRight = () => {
   
	    // 容器总宽度
	    const goodsBoxWidth = document.querySelector