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

先看看效果图

所要实现的功能

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

看看代码

注：因为没有使用框架的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>