一、前言
没有使用任何框架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;
}
三、总结
样式中、可能有许多瑕疵，比如说性能方面，代码臃肿等。作为参考，希望共同进步，同样也可以搞些扩展炫酷画面，例如，背景星空，图片星星、通过延迟秒数的形式，逐渐增多，或者消失显示（一闪一亮）；或者搞自己女朋友名字，进行乱序乱入，纵向横行，配上星星点缀。
各位看官》创作不易，点个赞！！！
诸君共勉：万事开头难，只愿肯放弃。
免责声明：本文章仅用于学习参考