diff --git a/miniprogram/pages/upload/upload.ts b/miniprogram/pages/upload/upload.ts index a1e512c..53c5486 100755 --- a/miniprogram/pages/upload/upload.ts +++ b/miniprogram/pages/upload/upload.ts @@ -914,6 +914,9 @@ Page({ } const stripCentered = strip.length <= 5; this.setData({ dateStripItems: strip, imagesByDate, selectedDateKey: selectedKey, selectedDateImages: selectedImages, gridCols, selectedMonthTitle: monthTitle, useWaterfall, waterfallLeft, waterfallRight, stripCentered }); + if (useWaterfall) { + this.balanceWaterfall(selectedImages); + } } catch (err) { console.error('重建日期条失败:', err); } @@ -931,6 +934,68 @@ Page({ images.forEach((img, idx) => { (idx % 2 === 0 ? waterfallLeft : waterfallRight).push(img); }); } this.setData({ selectedDateKey: dateKey, selectedDateImages: images, gridCols, selectedMonthTitle: `${y}-${String(m).padStart(2,'0')}`, useWaterfall, waterfallLeft, waterfallRight }); + if (useWaterfall) { + this.balanceWaterfall(images); + } + }, + + async ensureThumbSize(img: any): Promise<{ w: number; h: number } | null> { + if (img && typeof img._thumbW === 'number' && typeof img._thumbH === 'number') { + return { w: img._thumbW, h: img._thumbH }; + } + const src = img && img.thumbnail_url; + if (!src) return null; + return new Promise((resolve) => { + wx.getImageInfo({ + src, + success: (res) => { + img._thumbW = res.width; + img._thumbH = res.height; + resolve({ w: res.width, h: res.height }); + }, + fail: () => { + resolve(null); + } + }); + }); + }, + + async computeWaterfallColumns(images: any[]): Promise<{ left: any[]; right: any[] }> { + const si = wx.getSystemInfoSync(); + const ww = si.windowWidth; + const rpx = ww / 750; + const padPx = Math.floor(24 * rpx); + const gapPx = Math.floor(12 * rpx); + const colW = Math.max(1, Math.floor((ww - padPx - gapPx) / 2)); + const mbPx = Math.floor(12 * rpx); + let leftH = 0; + let rightH = 0; + const left: any[] = []; + const right: any[] = []; + const infos = await Promise.all(images.map((img) => this.ensureThumbSize(img))); + for (let i = 0; i < images.length; i++) { + const img = images[i]; + const info = infos[i]; + let h = 200; + if (info && info.w > 0) { + h = Math.floor(info.h * (colW / info.w)); + } + if (leftH <= rightH) { + left.push(img); + leftH += h + mbPx; + } else { + right.push(img); + rightH += h + mbPx; + } + } + return { left, right }; + }, + + async balanceWaterfall(images: any[]) { + try { + const { left, right } = await this.computeWaterfallColumns(images); + this.setData({ waterfallLeft: left, waterfallRight: right }); + } catch (e) {} }, })