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

缺乏、安全感 2022-12-16 13:10 170阅读 0赞

## 需求背景 ##

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

## 原实现方案 ##

通过`css`的`flex`布局和`justify-content: space-between`让商品元素均匀排布。效果如下：  
![20201020151033287.png][]  
可见，当商品铺差不多够满了一行时展示效果是ok的，不足一行时，就会有问题。

## 新思路 ##

1.  不再用flex布局，使用`float`浮动，让商品元素一行展示；
2.  根据父容器的宽度，计算出一行可以展示的数量 `n`;
3.  计算每个商品的`margin-right`的值`newMarginRight`, 通过`js`动态设置；
4.  父元素`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('.img-goods-box-hyy')?.getBoundingClientRect().width;
    	    if (goodsBoxWidth) { 
    	      // 计算一行最多可放的商品数量
    	      const n = parseInt(String(goodsBoxWidth / (GOODS_CARD_WIDTH + MIN_MARGIN_RIGHT)));
    	      // 超过GOODS_NUM_INLINE = 4时，计算新的margin-right值
    	      if (n >= GOODS_NUM_INLINE) { 
    	        const newMarginRight = parseInt(String((goodsBoxWidth - (GOODS_CARD_WIDTH * n)) / (n - 1)));
    	        // console.log('每行展示的商品数量', n);
    	        // console.log('每个商品的右边距', newMarginRight);
    	        this.setState({ 
    	          cardMarginRight: (newMarginRight <= MIN_MARGIN_RIGHT) ? MIN_MARGIN_RIGHT : newMarginRight,
    	          imgBoxMarginRight: (newMarginRight <= MIN_MARGIN_RIGHT) ? 0 : (0 - newMarginRight)
    	        });
    	      }
        	}
      	}
      	componentDidMount() { 
      		// 监听窗口大小改变事件，实时计算
    	  window.addEventListener('resize', this.resizeHandler);
    	  this.calcCardMarginRight();
    	}
    	componentWillUnmount() { 
    	  window.removeEventListener('resize', this.resizeHandler);
    	}
    
    	render() { 
    		return (
    			<div className="clr img-goods-box-hyy">
    		        <ul className="img-goods-list" style={ { marginRight: imgBoxMarginRight + 'px'}}>
    		          { goods.length ?
    		            goods.map(item => this.renderImg(item)) :
    		            <li style={ { width: '100%'}}>
    		              <Empty />
    		            </li>}
    		          { new Array(10).fill(1).map((_, index) => <li key={ index} className="img-list-item__empty" />)}
    		        </ul>
    	      </div>
    		)
    	}
    }

**效果如下：**

较宽的屏幕中  
![20201020154211597.png][]  
屏幕变窄后  
![20201020154443520.png][]

## 一个小坑 ##

**调皮的滚动条**

按照以上方法，首次计算父容器宽度时，由于数据是异步获取的，**滚动条**还没出现，按照无滚动条的宽度计算出来的`margin-right`值大了，所以每行最后一个元素会被迫换行，造成很大的留白。

**补救措施：**

先计算出滚动条的宽度，初始计算的时候父容器宽度减掉滚动条宽度后再计算`margin-right`  
*将上面代码稍作修改即可，这里就不贴了。*

[20201020151033287.png]: /images/20221123/93596285789f4e54aa1011d6185582af.png
[20201020154211597.png]: /images/20221123/d6a583f319534e97bce8ea152c9c79c6.png
[20201020154443520.png]: /images/20221123/80aa96ad4bf6432e91c15cf4e9530879.png

发表评论取消回复

表情：

评论列表（有 0 条评论，170人围观）

还没有评论，来说两句吧...

相关阅读

相关行内元素

什么是行内元素？ display属性为inline的元素为行内元素，英文：inline element，其中文叫法有多种，如：内联元素、内嵌元素、行内元素、直进式元素等。

痛定思痛。/ 2023年01月07日 01:29/ 0 赞/ 83 阅读

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

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

缺乏、安全感/ 2022年12月16日 13:10/ 0 赞/ 171 阅读

相关块元素、行内元素、行内块元素及其相互转化

![1190185-20180226173831103-856421838.png][] ![1190185-20180226174051581-1899167703.png

Myth丶恋晨/ 2022年10月02日 14:56/ 0 赞/ 161 阅读

相关行内元素与块状元素行内替换元素与行内非替换元素的区别

img属于行内替换元素。height/width/padding/margin均可用。效果等于块元素。行内非替换元素，例如, height/width/padding

Love The Way You Lie/ 2022年07月21日 02:25/ 0 赞/ 159 阅读

相关块级元素，行内元素，行内块元素

（1）块级元素：div、p、hi、ul、ol、li、h1~h6、dl、dt、dd等等常用的块及元素有div、p、hi、ul、ol、li、h1~h6

布满荆棘的人生/ 2022年04月23日 13:12/ 0 赞/ 273 阅读

相关块级元素、行内元素和行内块元素

块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。常见的块元素有<h

Bertha 。/ 2022年03月16日 00:44/ 0 赞/ 396 阅读

相关 HTML行内元素、块状元素、行内块状元素的区别

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换：　　(1)displ

柔光的暖阳◎/ 2022年02月25日 07:40/ 0 赞/ 188 阅读

相关行内元素,块元素,行内块元素

常见的块元素:div p、nav、aside、header、footer、section、article、ul-li、addres;对块元素的居中直接使用margin:0 au

女爷i/ 2021年12月16日 20:37/ 0 赞/ 385 阅读

相关行内元素与块级元素与行内块元素

块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度块级元素可以设置width,height属性. 块级元素即使设置了宽度,仍然是独占一行. 块级元素可以设置

Dear 丶/ 2021年09月01日 10:55/ 0 赞/ 433 阅读

相关行内元素、块级元素、行内块元素

行内元素、块级元素、行内块元素 1. 块级元素display:block:自己独自霸占一整行,默认宽度是100%,可以设置宽高（div、p、h1-h6、form、ul、

淩亂°似流年/ 2021年07月25日 15:56/ 0 赞/ 490 阅读