目录
动态设定屏幕行数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样式格式
}