Vue木桶布局插件

????公司最近在重构,使用的是Vue框架。涉及到一个品牌的布局,因为品牌的字符长度不一致,所以导致每一个的品牌标签长短不一。多行布局下就会导致每行的品牌布局参差不齐,严重影响美观。于是就有了本篇的木桶布局插件。

木桶布局的实现是这样分步骤的:
  1. 首先对要填放的内容进行排序,筛选出每一行的元素。
  2. 再对每一行元素进行修整,使其美观对齐。

分步骤

一、根据需要选出每行的元素

????首先获取我们需要的元素、和我们目标容器的宽度。

Vue组件容器:


<template>
  <div ref="barrel">

      <slot></slot>

  </div>
</template>

二、再者我们需要获取容器和容器宽度


this.barrelBox = this.$refs.barrel;

this.barrelWidth = this.barrelBox.offsetWidth;
    
三、接着循环我们的元素,根据不同的元素的宽度进行分组。

ps:对于元素的宽度获取的时候我们需要对盒模型进行区分。



Array.prototype.forEach.call(items, (item) => {

            paddingRight = 0;

            paddingLeft = 0;

            marginLeft = parseInt(window.getComputedStyle(item, "").getPropertyValue('margin-left'));

            marginRight = parseInt(window.getComputedStyle(item, "").getPropertyValue('margin-right'));

            let boxSizing = window.getComputedStyle(item, "").getPropertyValue('box-sizing');

            if (boxSizing !== 'border-box') {

                paddingRight = parseInt(window.getComputedStyle(item, "").getPropertyValue('padding-right'));

                paddingLeft = parseInt(window.getComputedStyle(item, "").getPropertyValue('padding-left'));

            }

            widths = item.offsetWidth + marginLeft + marginRight + 1;

            item.realWidth = item.offsetWidth - paddingLeft - paddingRight + 1;

            let tempWidth = rowWidth + widths;

            if (tempWidth > barrelWidth) {

                dealWidth(rowList, rowWidth, barrelWidth);

                rowList = [item];

                rowWidth = widths;

            } else {
                rowWidth = tempWidth;

                rowList.push(item);

            }

        })
四、接着是对每一组的元素进行合理分配。

const dealWidth = (items, width, maxWidth) => {

let remain = maxWidth - width;

let num = items.length;

let remains = remain % num;

let residue = Math.floor(remain / num);

items.forEach((item, index) => {

    if (index === num - 1) {

        item.style.width = item.realWidth + residue + remains + 'px';

    } else {

        item.style.width = item.realWidth + residue + 'px';

    }

})

}

????我这边是采用的平均分配的方式将多余的宽度平均分配到每一个元素里。如一行中全部元素占800px,有8个元素,该行总长为960px。则每行增加的宽度为(960-800)/8=16,每个与元素宽度增加16px;
????值得注意的是,js在获取元素宽度的时候会存在精度问题,所以需要进行预设一个像素进行缓冲。

以下是我的代码地址

Github:vue-barrel

npm: vue-barrel

原文地址:https://segmentfault.com/a/1190000016829062

原文地址:https://www.cnblogs.com/lalalagq/p/9900929.html

时间: 2024-10-28 21:15:15

Vue木桶布局插件的相关文章

Vue ---- ajax cookies 插件安装 跨域问题 element-ui bootscript 导入

目录 补充: 流式布局样式 Django国际化配置 Django的TODO注释 Vue的ajax插件:axios 安装 配置 如何使用? Vue的cookies插件:cookies 安装: main.js配置 使用 跨域问题(同源策略) 后台处理跨域问题 element-ui插件安装 补充:bootscript导入 配置jQuery 配置BootSript 补充: 流式布局样式 .xxx{ width: 90vh; /* 屏幕宽度 */ height: 100vh; /* 屏幕高度 */ } D

jQuery Mobile的布局插件和示例

[转自网络] 现在已经进入了移动互联网时代,因此将你的网站迁移到移动设备上就显得比较重要的.问题是,如何在移动设备的小屏幕中呈现你的网站中的所有内容呢? 本文介绍13款基于jQuery Mobile的布局插件和示例,可以帮助你创建多视图或者分割视图布局的移动web页面,并会根据移动设备的方向和屏幕大小来动态调整所显示的内容. 1.  Three Column iPad Layout 三列分割视图布局效果,为手机和平板电脑上的移动网页布局提供了一个良好的平台. 源码/ 演示 2.  JQM Mul

html万能排版布局插件,web视图定位布局创意技术演示页

html万能排版布局插件,是不是感觉很强大,原理其实很简单,不过功能很强大哈哈,大量节省排版布局时间啊! test.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>web视图定位布局创意技术演示页</title> <meta content="width=device-width,initial-scale=1.0,m

jQuery 网格布局插件

如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 jQuery 网格布局插件(jQuery Grid Plugins),它可以帮助你在创建网格布局项目时大大缩短开发时间. 1. Freewall Freewall 是一个跨浏览器和响应式的 jQuery 插件,以帮助您创建多种类型的网格布局:灵活的布局,图像布局,嵌套网格,流体网格,Metro 风格

jQuery Masonry-强大的动态不规则布局插件,让你的网页更自然

Masonry是 一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发类似剪贴画的界面效果.和CSS中float的效果不太一样的地方在 于,float先水平排列,然后再垂直排列,使用Masonry则垂直排列元素,然后将下一个元素放置到网格中的下一个开发区域.这种效果可以最小化处理 不同高度的元素在垂直方向的间隙.如下: 在上图中大家可以看到,在网格布局中使用float来处理不同高度的元素会使得垂直方向的元素间间隔比较大,而使用Masonry处理后,间隔变小. 用法 首先倒入类库,

任务四十五:多功能相册之木桶布局

面向人群: 有一定HTML.CSS.JavaScript基础 难度: 困难 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决定课程效果的,还是你的每一次思考和实践. 课程多数题目的解决方案都不是唯一的,这和我们在实际工作中的情况也是一致的.因此,我们的要求不仅仅是实现设计稿的效果,更是要多去思考不同的解决方案,评估不同方案的优劣,然后使用在该场景下最优雅的方式去实现.那些最终没有被我们采纳的

基于jQuery图片元素网格布局插件

基于jQuery图片元素网格布局插件是一款可以将图片或HTML元素均匀分布排列为网格布局的jQuery插件jMosaic.效果图如下: 在线预览   源码下载 实现的代码. html代码: <center><h3>演示1</h3></center> <div class="pictures"> <img src="img/pics-001.jpg" width="600" heig

代码修炼之路-木桶布局

这篇文章我们主要做三件事 1. 讲解木桶布局的原理 2. 把这个效果做成个UI 精美.功能完善的小项目 3. 通过这个项目,演示如何去思考.如何去优化代码 木桶布局原理 假设我们手里有20张照片,这些照片可以在保持宽高比的情况下进行放大或者缩小.选定一个基准高度比如200px * 拿第1张照片,锁定宽高比高度压缩到200px,放到第一行* 拿第2张照片,高度压缩到200px,放到第一行,图片1的后面 ...* 拿第5张照片,高度压缩到200px,放到第一行.oh,不好,空间不够,放不下了* 把前

Vue 开发自定义插件学习记录 -- 入门

首先,你需要了解插件实现的基本原理 插件基本原理: 我们都知道用Vue.use注册插件,那你知道Vue.use(plugin) 干了什么? 以下是我对Vue官网的一些摘录和个人的理解 Vue.use( plugin ) 参数: {Object | Function} plugin 用法: 安装 Vue.js 插件.如果插件是一个对象,必须提供 install 方法.如果插件是一个函数,它会被作为 install 方法. install 方法调用时,会将 Vue 作为参数传入. 该方法需要在调用