vue计算排列布局

1、效果

2、html

        <div class="databubble">
          <div ref="content">
            <div
              v-for="(item, index) in databubble"
              ref="contentPage"
              :key="index"
              class="contentPage"
            >
              <div>
                <span class="title">{{ item.title }}</span>
              </div>
            </div>
            <div
              v-for="item in new Array(replenish)"
              :key="item"
              style="background: none; cursor: auto"
            ></div>
          </div>
        </div>

3、js

  const databubble = ref([])
  const content = ref()
  const contentPage = ref()

  const replenish = computed(() => {
    if (content.value && contentPage.value.length) {
      let contentPageWidth = contentPage.value[0].clientWidth
      let widthPage = Math.floor(content.value.clientWidth / contentPageWidth)
      let row = Math.floor(databubble.value.length / widthPage)
      if (Number.isInteger(databubble.value.length / widthPage)) {
        return 0
      } else {
        return widthPage - (databubble.value.length - row * widthPage)
      }
    } else {
      return 0
    }
  })

4、css

  .databubble {
    margin: 16px;
    > div:nth-child(1) {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      > div {
        width: 24.6%;
        height: 88px;
        background-color: #f5f7fb;
        border-radius: 4px;
        padding: 0 12px;
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;
        line-height: 88px;
        cursor: pointer;
        .title {
          color: #202531;
          font-size: 18px;
        }
      }
    }
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/217756.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2023-2024-1-高级语言程序设计-第2次月考函数题

6-1-1 调用函数求分段函数 编写函数fun计算下列分段函数的值&#xff1a; 。 函数接口定义&#xff1a; float fun(float x); 其中 x 是用户传入的参数。 函数须返回分段函数的计算结果。 裁判测试程序样例&#xff1a; #include <stdio.h> #include <math.h> …

EI级 | Matlab实现TCN-GRU-Multihead-Attention多头注意力机制多变量时间序列预测

EI级 | Matlab实现TCN-GRU-Multihead-Attention多头注意力机制多变量时间序列预测 目录 EI级 | Matlab实现TCN-GRU-Multihead-Attention多头注意力机制多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.【EI级】Matlab实现TCN-GRU-Multihead-Attention…

聊聊 Jetpack Compose 的 “状态订阅自动刷新” -- mutableStateListOf

Jekpack Compose “状态订阅&自动刷新” 系列&#xff1a; 【 聊聊 Jetpack Compose 的 “状态订阅&自动刷新” - - MutableState/mutableStateOf 】 【 聊聊 Jetpack Compose 的 “状态订阅&自动刷新” - - remember 和重组作用域 】 【 聊聊 Jetpack Compose 的 …

王道数据结构课后代码题p175 06.已知一棵树的层次序列及每个结点的度,编写算法构造此树的孩子-兄弟链表。(c语言代码实现)

/* 此树为 A B C D E F G 孩子-兄弟链表为 A B E C F G D */ 本题代码如下 void createtree(tree* t, char a[], int degree[], int n) {// 为B数组分配内存tree* B (tree*)malloc(sizeof(tree) * n);int i 0;i…

Maven基础知识

Maven是一款用于管理和构建Java项目的工具 Maven的作用&#xff1a; 依赖管理&#xff1a;方便快捷的管理项目依赖的jar包&#xff0c;避免版本冲突问题统一项目结构&#xff1a;提供标准统一的项目结构项目构建&#xff1a;标准跨平台的自动化项目构建方式 maven创建的工程…

Milvus 再上新!支持 Upsert、Kafka Connector、集成 Airbyte,助力高效数据流处理

Milvus 已支持 Upsert、 Kafka Connector、Airbyte&#xff01; 在上周的文章中《登陆 Azure、发布新版本……Zilliz 昨夜今晨发生了什么&#xff1f;》&#xff0c;我们已经透露过 Milvus&#xff08;Zilliz Cloud&#xff09;为提高数据流处理效率&#xff0c; 先后支持了 Up…

HostHunter虚拟主机发现

HostHunter虚拟主机发现 1.HostHunter2.安装3.参数解释4.实例1.HostHunter HostHunter 一种工具,用于有效发现和提取提供大量目标 IPv4 或 IPv6 地址的主机名。HostHunter 利用简单的 OSINT 和主动协调技术将 IP 目标与虚拟主机名进行映射。这对于发现组织的真正攻击面特别有…

[ROS2] --- ROS2安装

ROS2安装到Ubuntu2204系统中&#xff0c;安装步骤如下&#xff1a; 1 设置编码 $ sudo apt update && sudo apt install locales $ sudo locale-gen en_US en_US.UTF-8 $ sudo update-locale LC_ALLen_US.UTF-8 LANGen_US.UTF-8 $ export LANGen_US.UTF-82 添加源 $…

深入探讨网络抓取:如何使用 Scala 和 Dispatch 获取 LinkedIn 图片

网络抓取是一种从互联网上获取数据的技术&#xff0c;它可以用于各种目的&#xff0c;例如数据分析、信息检索、竞争情报等。网络抓取的过程通常包括以下几个步骤&#xff1a; 发送 HTTP 请求到目标网站解析响应的 HTML 文档提取所需的数据存储或处理数据 在本文中&#xff0…

从声纹模型到语音合成:音频处理 AI 技术前沿 | 开源专题 No.45

facebookresearch/audiocraft Stars: 16.6k License: MIT AudioCraft 是一个用于音频生成的 PyTorch 库。它包含了两个最先进的 AI 生成模型 (AudioGen 和 MusicGen) 的推理和训练代码&#xff0c;可以产生高质量音频。该项目还提供了其他功能&#xff1a; MusicGen&#xf…

MySQL语法回顾

数据库操作语言包括DDL、DML、DQL和DCL&#xff0c;分别用于定义、操作、查询和控制数据库。 DDL&#xff08;Data Definition Language&#xff09;数据定义语言&#xff1a; DDL用于定义数据库、表、列、索引、视图、存储过程、触发器等对象&#xff0c;包括CREATE、ALTER、…

golang之net/http模块学习

文章目录 开启服务开启访问静态文件获取现在时间按时间创建一个空的json文件按时间创建一个固定值的json文件 跨域请求处理输出是json 开启服务 package mainimport ("fmt""net/http" )//路由 func handler(w http.ResponseWriter, r *http.Request){fmt.…

通过网线连接的局域网电脑怎么实现上网功能

在机床里面的工控机有时候需要进行联网操作,但是又没有无线网或者外网网线,这时候可以通过笔记本的无线wifi功能实现上网功能. 通过网络适配器-找到wifi对应适配器-共享-1 打勾-2选中与工控机连接的网口-既可. 工控机端,将网口设置为自动获取IP

.NET Core6.0 MVC+layui+SqlSugar 简单增删改查

HTML部分: {ViewData["Title"] "用户列表"; } <!DOCTYPE html> <html> <head><meta charset"utf-8"><title>用户列表</title><meta name"renderer" content"webkit"><meta …

DevOps搭建(三)-Git安装详细步骤

前面两篇文章我们讲了如何安装swappiness安装和虚拟机。这篇我们详细讲下如何安装Git。 1、YUM源更改为阿里云镜像源 1.1、备份CentOS-Base.repo 先备份原有的 CentOS-Base.repo 文件 sudo mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup…

C# 热键注册工具类

写在前面 介绍一个验证过的热键注册工具类&#xff0c;使用系统类库user32.dll中的RegisterHotkey函数来实现全局热键的注册。 代码实现 [Flags]public enum KeyModifiers{Alt 1,Control 2,Shift 4,Windows 8,NoRepeat 0x4000}public static class HotKeyHelper{[DllImp…

十五、机器学习进阶知识:K-Means聚类算法

文章目录 1、聚类概述2、K-Means聚类算法原理3、K-Means聚类实现3.1 基于SKlearn实现K-Means聚类3.2 自编写方式实现K-Means聚类 4、算法不足与解决思路4.1 存在的问题4.2 常见K值确定方法4.3 算法评估优化思路 1、聚类概述 聚类&#xff08;Clustering&#xff09;是指将不同…

菜鸟学习日记(python)——运算符

我们进行运算时&#xff0c;需要两类数据&#xff0c;操作数和运算符&#xff0c;例如&#xff1a;ab就是一个运算&#xff0c;它的操作数是a和b&#xff0c;运算符是‘’ 在python中运算符包括以下几大类&#xff1a; 算数运算符比较&#xff08;关系&#xff09;运算符赋值…

【云原生 | Docker】Docker核心概念 应用上手最佳流程

&#x1f935;‍♂️ 个人主页: AI_magician &#x1f4e1;主页地址&#xff1a; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f468;‍&#x1f4bb;景愿&#xff1a;旨在于能和更多的热爱计算机的伙伴一起成长&#xff01;&#xff01;&…

ubuntu 下载编译 opencv4.2.0并检验

如有帮助点赞收藏关注&#xff01; 如需转载&#xff0c;请注明出处&#xff01; ubuntu 的opencv4.2.0下载与编译 下载依赖开始编译安装配置OpenCV编译环境检验* 完成 下载 首先下载opencv源码网址&#xff1a; https://opencv.org/releases/page/3/ 下载成zip后&#xff0c;…