你想要的图片效果（动态实现）

一、前言

没有使用任何框架API，代码或逻辑在html或小程序都适用。主要实现图片随机位置、随机大小、不重叠，在页面上排布；还有扩展功能选定固定图片位置槽数、固定大小、不重叠，在页面上通过添加，图片随机排布。

二、实操效果（复制粘贴即可）

1、效果图

随机排序效果图：

固定排序效果图：

两张效果图：代表每次刷新位置都会改变。固定槽位置

2、随机排序完整代码

①简单讲解

list（初始化的数组） 和 arr（在初始化的基础上加上了随机定位的数据和随机的宽高） 是界面要遍历的数组，决定图片渲染数量，这个值也可以改成从后端获取。
数组格式

屏幕大小、图片数量可通过传参形式定义（后端）

var windowHeights = wx.getSystemInfoSync().windowHeight
var windowWidths = wx.getSystemInfoSync().windowWidth

for (let i = 0; i < 80; i++)  //定义数量

max 是图片最大值，min 是图片最小值

let max = 35;
let min = 12;

y_left 和 y_top 是对比之前遍历的定位数据和当前的定位数据，取到双方相差的绝对值（30），这里的30可以是前面的max（图片最大宽高），它会直接影响数据得出结果的效率，值越小得出结果越快。

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
  }

②完整代码

index.wxml

<scroll-view class="imagetext" scroll-x="true" style="width: 100%;height:100vh">
    <block wx:for="{{arr}}" wx:key="">
    <image src="/images/tj.png" style="height:{{item.item.height}}px;width:{{item.item.width}}px;left:{{item.left}}px;top:{{item.top}}px;">
    </image>
    </block>
    </scroll-view>

index.js

let max = 35;
let min = 12;
let windowWidth = 0;
let windowHeight = 0;
Page({
  data: {
    list: [],
    arr: []
  },
  onResize(e) {
    var windowHeights = wx.getSystemInfoSync().windowHeight //可使用屏幕高度
    var windowWidths = wx.getSystemInfoSync().windowWidth


    console.log('eeee', windowWidths)
    if (windowWidths < windowWidth) return
    windowHeight = windowHeights - max
    windowWidth = windowWidths - max
    console.log('windowHeight', windowHeight)


    let list = [],
      width, height;
    for (let i = 0; i < 80; i++) { //定义图片数量，可后端传参
      height = width = Math.floor(Math.random() * (max - min + 1) + min); //随机宽高
      list[i] = {
        i,
        height,
        width
      }
    }
    this.setData({
      list
    }, () => {
      var arr = [];
      for (let i = 0; i < this.data.list.length; i++) {
        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 (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')
    this.onResize();


  },


  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
  }
})

index.wxss

image{
  position: absolute;
}

3、固定排序完整代码

①代码讲解

首先，要了解数据显示通过缓存或者后端进行传输，图片固定宽高，固定位置（也就是跟槽数有关）。由于偏于实践，有点击弹窗功能、长按删除功能（可忽略）。
随机12位整数，进行筛选

mathRandom() {
    var maxTimes = 20;
    do {
      var num = Math.floor(Math.random() * 12) + 1;
      if (-1 == arrMath.indexOf(num)) {
        arrMath.push(num);
        return num;
      }
      maxTimes--;
    } while (maxTimes);
  },

数据格式

点击、长按方法

// item.item.memorandumsz.colorType 通过传过来的数据，动态选择图片（也就是红球、绿球、蓝球等）
<image src="/images/{{item.item.memorandumsz.colorType}}.png" style="height:{{item.item.height}}rpx;width:{{item.item.width}}rpx;left:{{item.left}}rpx;top:{{item.top}}rpx;">
  </image>
// bindtap="multipleTap" bindlongtap="longTap" 一个是点击弹窗方法，一个是长按删除方法；可忽略
  <text style="left:{{item.left+10}}rpx;top:{{item.top+40}}rpx;" data-content="{{item.item.memorandumsz.content}}" data-colorType="{{item.item.memorandumsz.colorType}}" bindtap="multipleTap" bindlongtap="longTap">{{item.item.memorandumsz.title}}</text>

②完整代码

index.wxml

<view class="head_bwl">
    <view class="balls_head">
    <scroll-view class="imagetext" scroll-x="true" style="width: 100%;height:100%">
    <block wx:for="{{arr}}" wx:key="index">
    <image src="/images/{{item.item.memorandumsz.colorType}}.png" style="height:{{item.item.height}}rpx;width:{{item.item.width}}rpx;left:{{item.left}}rpx;top:{{item.top}}rpx;">
    </image>
    <text style="left:{{item.left+10}}rpx;top:{{item.top+40}}rpx;" data-content="{{item.item.memorandumsz.content}}" data-colorType="{{item.item.memorandumsz.colorType}}" bindtap="multipleTap" bindlongtap="longTap">{{item.item.memorandumsz.title}}</text>
    </block>
    </scroll-view>
    </view>
    </view>

index.js

Page({
  data: {
    memorandumsz: [],
    list: [],
    arr: []

  },
  onResize() {
    let list = [],
      width, height;
    // 缓存提取，也可自行造模拟数据，直接写入data中即可
    var memorandumszs = wx.getStorageSync('memorandumsz');
    for (let i = 0; i < memorandumszs.length; i++) {
      //功能不需要随机的宽高
      height = 280;
      width = 180;
      let memorandumsz = memorandumszs[i];
    //根据不同数据，进行赋值，代表不同图片
      switch (memorandumsz.colorType) {
        case 1:
          memorandumsz.colorType = "hq";
          break;
        case 2:
          memorandumsz.colorType = "lq";
          break;
        case 3:
          memorandumsz.colorType = "lsq";
          break;
        case 4:
          memorandumsz.colorType = "hsq";
          break;
      }
      list[i] = {
        i,
        height,
        width,
        memorandumsz
      }
    }

    this.setData({
      list
    }, () => {
      var arr = [];
      var left = 0;
      var top = 20;

      for (let i = 0; i < this.data.list.length; i++) {
        //考虑 间距+本身 进行逐一加长度  然后就可以适应内容了 宽度：5+100 高度：5+120
        //如果随机12个槽，进行重复判断，然后随机补充
        var num = this.mathRandom();
        switch (num) {
          case 1:
            left = 0;
            top = 20;
            break;
          case 2:
            left = 190;
            top = 20;
            break;
          case 3:
            left = 380;
            top = 20;
            break;
          case 4:
            left = 570;
            top = 20;
            break;
          case 5:
            left = 0;
            top = 320;
            break;
          case 6:
            left = 190;
            top = 320;
            break;
          case 7:
            left = 380;
            top = 320;
            break;
          case 8:
            left = 570;
            top = 320;
            break;
          case 9:
            left = 0;
            top = 620;
            break;
          case 10:
            left = 190;
            top = 620;
            break;
          case 11:
            left = 380;
            top = 620;
            break;
          case 12:
            left = 570;
            top = 620;
            break;
        }

        let obj = {
          left: left,
          top: top,
          item: this.data.list[i]
        };
        arr.push(obj);
        if (i == this.data.list.length - 1) this.setData({
          arr
        })
      },
  mathRandom() {
    var maxTimes = 20;
    do {
      var num = Math.floor(Math.random() * 12) + 1;
      if (-1 == arrMath.indexOf(num)) {
        arrMath.push(num);
        return num;
      }
      maxTimes--;
    } while (maxTimes);
  },
  onLoad: function (options) {
    console.log('11111')
    this.onResize();
  },


})

index.wxss

.head_bwl {
  position: absolute;
  left: 0rpx;
  top: 0rpx;
  width: 100%;
  height: 100%;
  background: rgba(251, 192, 1, 0.42);
}
.balls_head {
  position: relative;
  width: 100%;
  height: 88%;
}
.head_bwl .balls_head image {
  position: absolute;
}
.head_bwl .balls_head .imagetext text {
  position: absolute;
  width: 160rpx;
  height: 140rpx;
  text-align: center;
}

三、总结

样式中、可能有许多瑕疵，比如说性能方面，代码臃肿等。作为参考，希望共同进步，同样也可以搞些扩展炫酷画面，例如，背景星空，图片星星、通过延迟秒数的形式，逐渐增多，或者消失显示（一闪一亮）；或者搞自己女朋友名字，进行乱序乱入，纵向横行，配上星星点缀。

各位看官》创作不易，点个赞！！！
诸君共勉：万事开头难，只愿肯放弃。

免责声明：本文章仅用于学习参考