目录
先看看效果图
所要实现的功能
在页面上随机的位置显示随机大小的图片,并且每个图片不能重叠,完整实现代码。
看看代码
注:因为没有使用框架的API,所以该代码的逻辑在h5或者小程序,任何地方都适用。
js代码讲解:
list(初始化的数组) 和 arr(在初始化的基础上加上了随机定位的数据和随机的宽高) 是界面要遍历的数组,决定图片渲染数量,这个值也可以改成从后端获取。
最终的数据格式
max 是图片最大值,min 是图片最小值,因为我这个demo 的宽高比是一样的,所以是一个值。
160 是设置边缘宽度
70 是设置边缘高度
边缘是指图片能扩散分布的边缘。
y_left 和 y_top 是对比之前遍历的定位数据和当前的定位数据,取到双方相差的绝对值(30),这里的30可以是前面的max(图片最大宽高),它会直接影响数据得出结果的效率,值越小得出结果越快。
下面看看完整代码吧
小程序版本完整代码
// pages/test2/test2.js
let max = 35;
let min = 12;
let windowWidth = 0;
let windowHeight = 0;
Page({
data: {
list: [],
arr: []
},
onResize(e) {
console.log('eeee', e)
if (e.size.windowWidth < windowWidth) return
windowHeight = e.size.windowHeight - max
windowWidth = e.size.windowWidth - max
console.log('windowHeight',windowHeight)
let list = [],
width, height;
for (let i = 0; i < 90; i++) {
height = width = Math.floor(Math.random() * (max - min + 1) + min);
list[i] = {
i,
height,
width
}
}
this.setData({
list
}, () => {
var arr = [];
let y = 0
for (let i = 0; i < this.data.list.length; i++) {
y++
var left = Math.floor(Math.random() * windowWidth);
var top = Math.floor(Math.random() * windowHeight);
let obj = {
left: left,
top: top,
item: this.data.list[i]
};
if (arr.length == 0) {
arr.push(obj)
} else {
//if_Availability 是否可用
if (this.if_Availability(left, top, arr)) {
arr.push(obj)
if (i == this.data.list.length - 1) this.setData({
arr
})
} else {
i--;
}
}
}
})
},
onLoad: function (options) {
console.log('11111')
},
if_Availability(left, top, arr) {
let status = true
for (let i = 0; i < arr.length; i++) {
let y_left = Math.abs(arr[i].left - left)
let y_top = Math.abs(arr[i].top - top)
// console.log(y_left, y_top, arr);
if (y_left < max && y_top < max) {
status = false
}
}
return status
}
})
<scroll-view scroll-x="true" style="width: 100%;height:100vh">
<block wx:for="{{arr}}" wx:key="">
<image src="./go.png"
style="height:{{item.item.height}}px;width:{{item.item.width}}px;left:{{item.left}}px;top:{{item.top}}px;"></image>
</block>
</scroll-view>
image{
position: absolute;
}
VUE版本的代码:
<template>
<div class="pages">
<!--pages/test2/test2.wxml-->
<div v-for="(item, index) in arr" :key="index">
<img
class="div"
src="./go.png"
:style="{
height: item.item.height + 'px',
width: item.item.width + 'px',
left: item.left + 'px',
top: item.top + 'px',
}"
>
</div>
</div>
</template>
<script>
import config from "@/components/config";
import methodUtil from "@/utils/methodUtil";
// 图片大小随机范围
let max = 45;
let min = 25;
// 图片扩散屏幕范围
let windowWidth = 0;
let windowHeight = 0;
export default {
data() {
return {
arr: []
};
},
onLoad: function (options) {
console.log('重启,max35,length90 可以,(max=45,length 50 || max45,length 42)就是大限')
let list = [], width, height;
for (let i = 0; i < 42; i++) {
height = width = Math.floor(Math.random() * (max - min + 1) + min);
list[i] = { i, height, width }
}
var arr = [];
let y = 0
wx.onWindowResize((e)=>{
console.log('eeee', e)
if (e.size.windowWidth < windowWidth||e.size.windowHeight<e.size.windowHeight) return
windowHeight = e.size.windowHeight - max
windowWidth = e.size.windowWidth - max
console.log('windowHeight',windowHeight)
for (let i = 0; i < list.length; i++) {
y++
var left = Math.floor(Math.random() * windowWidth);
var top = Math.floor(Math.random() * windowHeight);
let obj = {
left: left,
top: top,
item: list[i]
};
if (arr.length == 0) {
arr.push(obj)
} else {
//if_Availability 是否可用
if (this.if_Availability(left, top, arr)) {
arr.push(obj)
if (i == list.length - 1) this.arr = arr
} else {
i--;
}
}
}
})
},
methods: {
if_Availability(left, top, arr) {
let status = true
for (let i = 0; i < arr.length; i++) {
let y_left = Math.abs(arr[i].left - left)
let y_top = Math.abs(arr[i].top - top)
if (y_left < max && y_top < max) {
status = false
}
}
return status
}
}
}
</script>
<style lang="less" scoped>
.pages {
width: 200vw;
height: 100vh;
margin: 0 auto;
position: relative;
}
.div {
position: absolute;
border-radius: 999rpx;
border: 1px solid #d0d0d0;
}
</style>