Vue + JS实现动态设定分屏数量功能

最新推荐文章于 2024-12-17 14:55:54 发布

原创最新推荐文章于 2024-12-17 14:55:54 发布 · 853 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #css3

本文介绍了一种动态调整屏幕布局的方法，通过计算元素位置和大小，实现在不同屏幕尺寸下，元素能够均匀分布。利用HTML和JS，可以动态设置div属性，根据后台数据计算元素的排列方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

动态设定屏幕行数M和列数N，将屏幕分成M * N等分

前言

唯一的难点是如何在js中动态给div的属性赋值，这个动态是指通过查找后台数据计算得出结果返回到style中，效果如图：

实现方法

1.HTML

代码如下（示例）：

<iframe v-for="item in dataList" :key="item" :style="position(item.sort)" :src="item.src" scrolling="no"></iframe>

2.JS

代码如下：

代码如下（示例）：

position (sort) {

// m 每行个数 n 每列个数 sort 为该元素下标

var x = ((sort) % this.m) + 1 // 在每行中排在第几个

var y = ((sort + 1) - x) / this.m + 1 // 排在第几列

var left = ((1 / (2 * this.m)) * ((2 * x) - 1) - 0.5) // left值

var top = ((1 / (2 * this.n)) * ((2 * y) - 1) - 0.5) // top值

var leftStr = Number(left*100).toFixed(2)

leftStr+="%" // 转换为百分比

var topStr=Number(top*100).toFixed(2)

topStr+="%" // 转换为百分比

this.$set(list[sort], 'url', 'www.baidu.com') // 给每个方块加上跳转路径

return 'background-color: #000;transform: scaleX(calc(1 /' + this.m + ')) scaleY(calc(1 /' + this.n + '));top:' + topStr + ';left:' + leftStr + ';' // 拼成CSS样式格式
}