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

缺乏、安全感 2024-03-31 17:13 15阅读 0赞

### 一、前言 ###

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

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

#### 1、效果图 ####

##### 随机排序效果图： #####

![在这里插入图片描述][a760d7abc74d45e4a2d6f2125187360b.png_pic_center]

##### 固定排序效果图： #####

两张效果图：代表每次刷新位置都会改变。固定槽位置  
![在这里插入图片描述][69948f020cf24738ab7716a367a637a5.png_pic_center]  
![在这里插入图片描述][7071e1ebab064668bf916f919b73ec80.png_pic_center]

#### 2、随机排序完整代码 ####

##### ①简单讲解 #####

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

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

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

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

数据格式  
![在这里插入图片描述][691bcc4f5dd14bef94adf6f0830fdd9e.png_pic_center]  
点击、长按方法

// 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;
    }

### 三、总结 ###

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

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

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

[a760d7abc74d45e4a2d6f2125187360b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/9c501dbc5c744957ade88122333e3a40.png
[69948f020cf24738ab7716a367a637a5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/f04eddb55a77417cb2b3685ce50afc43.png
[7071e1ebab064668bf916f919b73ec80.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/a1fff1b4ba204deeb6355c2167fe9f21.png
[3a5eab84fa9e428b9809ed029533fd0f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/c073bd7e2cf0493895a64d9f391df541.png
[691bcc4f5dd14bef94adf6f0830fdd9e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/e2b968b7b8804edf8facbe2a4934135f.png
[7d5d7bc082b54bc5977c41c573d57613.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/9dce1f34ecba4a66912506e53c7ca433.jpeg