随机位置显示图片不重叠前端实现详细讲解附效果图，代码可直接使用
目录
- 先看看效果图
- 所要实现的功能
- 看看代码
- js代码讲解：
- 下面看看完整代码吧
- 小程序版本完整代码
- VUE版本的代码：
先看看效果图
所要实现的功能
在页面上随机的位置显示随机大小的图片，并且每个图片不能重叠，完整实现代码。
看看代码
注：因为没有使用框架的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>相关文章：
MVC缓存OutPutCache学习笔记 (一) 参数配置
OutPutCache 参数详解 Duration : 缓存时间，以秒为单位，这个除非你的LocationNone，可以不添加此属性，其余时候都是必须的。 Location : 缓存放置的位置; 该值为枚举值: None: 当被设置为None时，其余的任何设置将不起作…
在Mac上控制Alt Delete-如何在Macbook上打开任务管理器
It happens to the best of us: were working away on some important project, and our trusty computer freezes. Or rather, a program were in just stops responding. So what do you do?这对我们最好的人来说是偶然的：我们正在做一些重要的项目，而…
HEW MAP文件使用
参考资料转载于:https://www.cnblogs.com/iluzhiyong/p/5145396.html
算法导论九章 答案
http://blog.csdn.net/z84616995z/article/details/18840823?reload 9.3-8题： http://blog.csdn.net/z84616995z/article/details/18938181 9.3-9题： http://blog.csdn.net/z84616995z/article/details/18889535转载于:https://www.cnblogs.com/sa51718…
小程序实现瀑布流，获取图片高度分成两组数据的函数封装代码
把一个数组根据数组内部的图片的高度，拆分成两个数组，组成瀑布流数据的方法。 使用方式： async created() {var arr this.$mock.sssdata.data.lists;//arr 是一个数组，里面包含若干对象，对象里面有图片var myArr a…
实现线程哪种方法更好_实施数据以实现更好的用户体验设计的4种方法
实现线程哪种方法更好Gone are the days when design used to rely mainly on the color palettes and the creativity of the designer. In the rapidly expanding technological world of today, it is essential to work across departments to enhance the screen experien…
String比较.equals
首先定义四个变量str public class SIzhui {public static void main(String[] args) {String str1"wang";String str2"li";String str3"wang";String str4new String("wang");} } 然后进行比较 public class SIzhui {public static …
mac下mysql5.7.10密码问题
mysql5.7.10刚安装好，会生成一个随机密码。 如果没记住这个随机密码，那么到mysql/bin/下执行mysql_secure_installation命令 按照提示重置密码和其他选项。 ps：找了一下午终于找到方法了！！！ 转载于:https:/…
Error: Cannot find module ‘express‘
解决方案：把node_module整个文件夹删掉,然后npm clean cache,看下package.json里有没有express的依赖项,有的话直接npm install,没有的话 npm install express --save
Observables简介以及它们与Promise有何不同
‘Observables’, ‘Observables’, ‘Observables’...Yes! Today, we will talk about this often discussed word of the market. Well also learn how they are different from Promises (havent heard about Promises? Not to worry! You will know more soon). Let’s s…
Spring Boot项目错误：Error parsing lifecycle processing instructions
pom.xml文件错误：Error parsing lifecycle processing instructions 解决方法：清空.m2/repository下的所有依赖文件，重新下载即可解决该问题。转载于:https://www.cnblogs.com/EasonJim/p/7724683.html
oracle执行计划连接方式
嵌套循环（Nested Loops （NL））假如有A、B两张表进行嵌套循环连接，那么Oracle会首先从A表中提取一条记录，然后去B表中查找相应的匹配记录，如果有的话，就把该条记录的信息推到等待返回的…
大转盘完整源码附效果图，可以下载直接用
本转盘实现功能，可以动态配置奖品和转盘相关的任何图片，可以灵活配置使用。是基于 uni-app 实现的。可以在小程序或者H5，各端兼容使用。 效果图：因为GIF图的掉帧，所以显示抽奖的转动速度慢，实际上转动比较…
使用FortJs使用现代JavaScript开发Node.js
介绍 (Introduction) Nodejs gives you the power to write server side code using JavaScript. In fact, it is very easy and fast to create a web server using Nodejs. There are several frameworks available on Node package manager which makes the development eve…
find 按时间查找
find 按时间查找 转载▼分类： linuxShell日记-mtime 修改时间-ctime 改变时间-atime 访问时间-mtime 5 至少5天之前修改过的文件，至少5天没修改过-mtime -5 5天之内修改过的文件-mtime 5 刚好5天前修改的文件 -perm 按权限查找 -perm 001 精确匹配权限…
转：从零开始做app需要做的事情列表
https://qdan.me/list/VaXl7N8emfv1ayWg 从零开始做App的Bootstrap 做一个App，需要很多东西。 不定期更新。 团队 工欲善其事，必先利其器。 需求管理 支持版本、迭代、需求的创建与管理。 产品经理在上面录入需求，开发参照开发，测…
uniapp自定义导航栏样式，自定义导航栏组件使用说明，兼容小程序和H5及各端
实现思路： 把底部导航做成一个组件，点击导航显示的页面也做成组件，在启动页面引入这四个组件，点击封装的导航组件就显示相应的组件页面，这样就不会出现页面重新加载的问题了，有个弊端就是导航页面不能使用…
javascript优化_如何通过使用服务人员来优化JavaScript应用
javascript优化Every now and then we hear about optimizing something. There are different kinds of optimizations we can do to make our apps faster and more efficient, or to save time or memory. This article will cover one of those methods — service worke…
【视觉SLAM14讲】ch3课后题答案
1.验证旋转矩阵是正交矩阵 感觉下面这篇博客写的不错 http://www.cnblogs.com/caster99/p/4703033.html 总结一下：旋转矩阵是一个完美的矩阵——正交矩阵。①行列式为1，②每个列向量都是单位向量且相互正交，③它的逆等于它的转置。 2.罗德里…
【转载】邻接表表示法
图的邻接表表示法 图的邻接表表示法类似于树的孩子链表表示法。对于图G中的每个顶点v i ，该方法把所有邻接于v i 的顶点v j 链成一个带头 结点的单链表，这个单链表就称为顶点v i 的邻接表(Adjacency List)。 1． 邻接表的结点结构 （…
宝塔的服务忽然挂掉解决方法
先登录宝塔看内存是否满了 如果满了就点击文件，找到大文件进行删除，然后清空回收站，重启服务器，就解决了。 清空回收站：点击首页，打开终端，输入下面命令， 清空回收站的命令是&#…
免费创办网站_足够好的工程来创办一家互联网公司
免费创办网站I gave a guest lecture in an undergraduate software engineering class (CSCE431) at Texas A&M University in March 2019. Now I’ve turned this lecture into a blog post here, and hopefully some people on the Internet will find this useful.我于…
centos7下安装docker（11容器操作总结）
这段时间主要是学习了对容器的操作，包括：容器的状态：start，stop，restart，rename，pause，unpause，rm，attach，exec，kill，logs…
Js插入元素到数组的头部和尾部 unshift push
我们经常会使用JS 数组插入数据，下面看一下常用的 1. 在数组头部插入元素 var arr [1,2,3]; arr.unshift(0);arr 输出结果： //arr [0,1,2,3] 2. 在数组尾部插入元素 var arr [1,2,3]; arr.push(4);arr 输出结果： //arr [1,2,3,4]
测试用例设计白皮书－－正交实验设计方法
一.方法简介利用因果图来设计测试用例时, 作为输入条件的原因与输出结果之间的因果关系,有时很难从软件需求规格说明中得到。往往因果关系非常庞大,以至于据此因果图而得到的测试用例数目多的惊人，给软件测试带来沉重的负担，为了有效地,合理地减少测试的…
ios单应用模式_如何为iOS 13暗模式设置应用
ios单应用模式Apple launched the much-awaited iOS 13 updates globally on September 19 across all iPhones launched within the past 4 years (back to the iPhone 6s). 苹果于9月19日在全球发布了期待已久的iOS 13更新，该更新适用于过去4年内发布的所有iPhone…
BZOJ1965 [Ahoi2005]SHUFFLE 洗牌 快速幂
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1965 题意概括 对于扑克牌的一次洗牌是这样定义的，将一叠N（N为偶数）张扑克牌平均分成上下两叠，取下面一叠的第一张作为新的一叠的第一张，…
uniapp 长链接 socket 封装
App.vue <script>import socket from @/util/IM.jsexport default {watch: {$route: function() {var page = getCurrentPages();console.log(watch-监听路由, page);}},globalData: {ImAuth: socket.connect(),},onLaunch: function(e) {},onShow: function() {socket.…
react项目开发步骤_成为专业React开发人员的31个步骤
react项目开发步骤我为达到可雇用水平而进行的每个项目和课程。 (Every single project and course I took to reach a hireable level.) Before I learned how to code, I used to ask developers how much time it took them to learn their craft — and how they managed t…
P1979 [NOIP]华容道
【问题描述】 小 B 最近迷上了华容道，可是他总是要花很长的时间才能完成一次。于是，他想到用编程来完成华容道：给定一种局面， 华容道是否根本就无法完成，如果能完成， 最少需要多少时间。 小 B 玩的华容道与…