随机位置显示图片不重叠前端实现详细讲解附效果图，代码可直接使用

先看看效果图

所要实现的功能

在页面上随机的位置显示随机大小的图片，并且每个图片不能重叠，完整实现代码。

看看代码

注：因为没有使用框架的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) returnwindowHeight = e.size.windowHeight - maxwindowWidth = e.size.windowWidth - maxconsole.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 = 0for (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 = truefor (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 = 0wx.onWindowResize((e)=>{console.log('eeee', e)if (e.size.windowWidth < windowWidth||e.size.windowHeight<e.size.windowHeight) returnwindowHeight = e.size.windowHeight - maxwindowWidth = e.size.windowWidth - maxconsole.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 = truefor (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>

随机位置显示图片不重叠前端实现详细讲解附效果图，代码可直接使用相关推荐

C#全屏随机位置显示图片的小程序
想法:将屏幕截图作为程序背景图,在之上弹出提示窗口,选择确定后进行定时图片随机位置显示.(支持ESC键退出) 需要添加的控件:Timer 需要修改的Form1属性为下图红色区域: 资源文件的添加:添加 ...
vue 固定范围内随机位置生成图片（可其他东西）
vue 固定范围内随机位置生成图片(可其他东西) 先说一下思路: 在一个范围内(主要是为了确认随机生成的图片中心点在范围内) 拿到图片半径(可随机,看需求) 随机生成xy坐标 (left,top) ...
vue 前端显示图片加token_前端甩锅神器：vue中的mock使用
首先声明,本文所介绍的方法,只是用于,在做好前端联调的本分工作之余,把前后端联调责任划清界限,并不用于帮后端定位问题(当然,mock也有更全面的方法促进项目的进行,小女不才,在此不提供介绍): 跟陌生 ...
python 在指定位置显示图片并调整窗口大小(或图片大小)
接着shell 匹配时间戳写的 # -*- coding: utf-8 -*- import cv2 as cv import time import sysradar_list=[] lidar_m ...
vue 前端显示图片加token_前端Vue3.0：从0到1手把手撸码搭建管理后台系统
第1节 – 了解项目开发流程手把手撸码前端 – 第1学时了解产品从0到1的开发流程,产品经理.UI设计师.研发部.测试工程师第2节 – 构建vue项目.代码仓库管理手把手撸码前端 – 第2学时 ...
jar包导出无法显示图片或者音乐_超详细微信表情包制作教程
微信表情开放平台 https://sticker.weixin.qq.com/ [可接表情包定制,ip设计,私信或留言] [可接表情包定制,ip设计,私信或留言] 1. 注册账号,阅读相关微信表情制作 ...
图片跟随鼠标样式跟随效果（附完整代码及效果）
Demo效果如下: 完整代码如下: <!DOCTYPE html> <html lang="en"><head><meta charset ...
2020最新款影视小程序后端+前端搭建详细教程附源码
准备工作教程很详细一步步操作都可以上线,教程都是亲自发布的,希望各位要搬运的时候备注来自哪里购买云服务器:教程等待更新购买域名+配置ssl证书:教程待更新常见问题: 问:域名需要备案吗? 回: ...
Springboot + vue 上传图片显示图片
Springboot + vue 上传显示图片上传图片: 前端: <el-uploadclass="upload-facepic"action="#": ...