v26110248 孕妈广场切分类更顺：卡片高度改为直接计算，不再逐张量高；每列先出 14 张，其余滑入后补

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-03 04:14:49 +00:00
parent 45b8a290f4
commit 5448410a69
8 changed files with 52 additions and 38 deletions
--- a/guangchang/ceshi/index.html
+++ b/guangchang/ceshi/index.html
@@ -367,8 +367,8 @@ mark{background:linear-gradient(transparent 62%,var(--c20) 0);color:inherit;padd
 </div>
 <div class="toast" id="toast"></div>

-<script src="meta.js?v=26110247"></script>
-<script src="tests.js?v=26110247"></script>
+<script src="meta.js?v=26110248"></script>
+<script src="tests.js?v=26110248"></script>
 <script>
 (function () {
  'use strict';
--- a/guangchang/index.html
+++ b/guangchang/index.html
@@ -581,10 +581,10 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
 <div id="sheet" role="dialog" aria-modal="true"><i class="sg"></i><div class="sbd" id="sbd"></div></div>
 <div class="toast" id="toast"></div>

-<script src="topics.js?v=26110247"></script>
-<script src="data.js?v=26110247"></script>
-<script src="feed.js?v=26110247"></script>
-<script src="ceshi/meta.js?v=26110247"></script>
+<script src="topics.js?v=26110248"></script>
+<script src="data.js?v=26110248"></script>
+<script src="feed.js?v=26110248"></script>
+<script src="ceshi/meta.js?v=26110248"></script>
 <script>
 (function () {
  'use strict';
@@ -650,7 +650,7 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
  var CMD = null, CMERR = false;
  /* 头像编码：数字 = av/NNNN.webp（旧代码头像）；'av:c012' = av/c012.webp（卡通/可爱卡通）；'/…' = 站内绝对路径（内置头像库 /_bridge/avatars/）；其余 = assets/img/mom/xxx.jpg */
  var avP = function (a) { return typeof a === 'number' ? 'av/' + ('000' + a).slice(-4) + '.webp' : a.indexOf('av:') === 0 ? 'av/' + a.slice(3) + '.webp' : a.charAt(0) === '/' ? a : '../assets/img/mom/' + a + '.jpg'; };
-  fetch('cm.json?v=26110247').then(function (r) { return r.json(); }).then(function (j) {
+  fetch('cm.json?v=26110248').then(function (r) { return r.json(); }).then(function (j) {
    CMD = j; if (openId && NBY[openId]) { renderComments(NBY[openId]); syncBar(NBY[openId]); }
  }).catch(function () { CMERR = true; if (openId && NBY[openId]) renderComments(NBY[openId]); });
  function commentsOf(n) {
@@ -939,29 +939,43 @@ button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:poin
      list.forEach(function (n, k) { if (k >= 3 && (k - 3) % 8 === 0) { var tid = csq[ci++ % csq.length]; if (TMBY[tid]) mixed.push({ test: TMBY[tid] }); } mixed.push(n); });
      list = [{ mine: 1 }].concat(mixed);
    }
-    var nk = 0;
-    list.forEach(function (n, k) {
-      if (n.mine) {
-        tmp.innerHTML = myCardHTML(); var me = tmp.firstChild;
-        cols[0].appendChild(me); hs[0] += me.offsetHeight + 8;
-        tmp.innerHTML = favCardHTML(); var fe = tmp.firstChild;
-        cols[0].appendChild(fe); hs[0] += fe.offsetHeight + 8;
-        return;
-      }
-      if (n.test) {
-        tmp.innerHTML = testCardHTML(n.test, dn);
-        var te = tmp.firstChild; te.style.animationDelay = Math.min(k, 10) * 30 + 'ms';
-        var tc0 = hs[0] <= hs[1] ? 0 : 1; cols[tc0].appendChild(te); hs[tc0] += te.offsetHeight + 8; lastTx[tc0] = false;
-        return;
-      }
-      k = nk++;
+    /* 11-03 用户：切分类有点卡。原来每张卡塞进列里再 offsetHeight 量高，每量一次整页重排；85 张卡在中端机上卡 0.5 秒以上，正好卡在滑入动画中间。
+       现在：帖子卡高度直接算（封面 = 列宽 × 比例，底部 = 标题 1/2 行 + 作者行，和 .nc 样式对应），只有「我的投稿 / 收藏 / 测试卡」这几种
+       一次性批量量高；整列拼成字符串一次挂上，每列先出前 14 张，其余等滑入动画走完再补；入场动画只给前 12 张。 */
+    var tw = cw - 18;
+    function txtW(t) { var w = 0; for (var i = 0; i < t.length; i++) w += t.charCodeAt(i) > 255 ? 13.6 : 7.4; return w; }
+    function estH(n, r) { return cw * r + 8 + 9 + (txtW(n.title) > tw ? 2 : 1) * 19.6 + 7 + 18; }
+    var specials = [];
+    list.forEach(function (n) {
+      if (n.mine) specials.push(myCardHTML(), favCardHTML());
+      else if (n.test) specials.push(testCardHTML(n.test, dn));
+    });
+    var spH = [];
+    if (specials.length) {
+      var meas = document.createElement('div');
+      meas.className = 'col'; meas.style.cssText = 'position:absolute;left:0;top:0;width:' + cw + 'px;visibility:hidden;pointer-events:none';
+      meas.innerHTML = specials.join(''); wf.appendChild(meas);
+      [].forEach.call(meas.children, function (el) { spH.push(el.offsetHeight); });   /* 一次重排量完 */
+      wf.removeChild(meas);
+    }
+    var out = [[], []], si = 0, nk = 0, k2 = 0;
+    function anim(h, k) { return k >= 12 ? h.replace('class="nc', 'style="animation:none" class="nc') : h.replace('class="nc', 'style="animation-delay:' + Math.min(k, 10) * 30 + 'ms" class="nc'); }
+    function add(html, c, h) { out[c].push(anim(html, k2++)); hs[c] += h + 8; }
+    list.forEach(function (n) {
+      if (n.mine) { add(specials[si], 0, spH[si++]); add(specials[si], 0, spH[si++]); return; }
+      if (n.test) { var tc0 = hs[0] <= hs[1] ? 0 : 1; add(specials[si], tc0, spH[si++]); lastTx[tc0] = false; return; }
+      nk++;
      var c = hs[0] <= hs[1] ? 0 : 1, sty = !lastTx[c] && n.photo ? (txN[c]++ % 2 ? 'tg' : 'ov') : '';
      lastTx[c] = !!sty;
-      tmp.innerHTML = cardHTML(n, !cur, sty);
-      var el = tmp.firstChild; el.style.animationDelay = Math.min(k, 10) * 30 + 'ms';
-      cols[c].appendChild(el);
-      hs[c] += el.offsetHeight + 8;
+      var r = n.ratio; if (n.photo && sty === 'ov') r = Math.max(r, 1.33); else if (n.photo && sty === 'tg') r = Math.max(r, 1.2);
+      add(cardHTML(n, !cur, sty), c, estH(n, r));
    });
+    var FIRST = 14, gen = renderFeed.gen = (renderFeed.gen || 0) + 1;
+    cols[0].innerHTML = out[0].slice(0, FIRST).join(''); cols[1].innerHTML = out[1].slice(0, FIRST).join('');
+    if (out[0].length > FIRST || out[1].length > FIRST) setTimeout(function () {
+      if (gen !== renderFeed.gen) return;   /* 期间又切了分类，作废 */
+      cols[0].insertAdjacentHTML('beforeend', out[0].slice(FIRST).join('')); cols[1].insertAdjacentHTML('beforeend', out[1].slice(FIRST).join(''));
+    }, 450);
    /* 话题下帖子看完，接着引到同分类其他话题，避免以为这块只有这几篇 */
    var mo = $('#more'), tc = cur && TBY[cur];
    if (tc) {
--- a/guangchang/mine/index.html
+++ b/guangchang/mine/index.html
@@ -105,7 +105,7 @@ main{padding:6px 16px 0}
 </div>
 <div class="wb"><button type="button" id="write"><svg class="ic" viewBox="0 0 24 24"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z"/></svg>写新的故事</button></div>

-<script src="../topics.js?v=26110247"></script>
+<script src="../topics.js?v=26110248"></script>
 <script>
 (function () {
  'use strict';
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <title>兜爸心选 · 孕育陪伴</title>
-<!-- V:26110247 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26110248 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
 <link rel="stylesheet" href="mama-box.css">
 <link rel="stylesheet" href="night.css">
 <!-- 夜晚模式：首屏绘制前就按上次的选择加 class，避免先白后黑闪一下（开关在首页右上角 #nightBtn，逻辑见 app.js） -->
@@ -2519,7 +2519,7 @@
 <script src="/_bridge/avatar-picker.js?v=26101105"></script>
 <script src="/_bridge/hand-icons.js?v=26101202"></script>
 <script src="js/zodiac-art.js"></script>
-<script src="guangchang/topics.js?v=26110247"></script>
+<script src="guangchang/topics.js?v=26110248"></script>
 <script src="js/app.js"></script>
 <script>
 /* 11-02 首页「孕妈广场」效果稿：地址带 ?gcv=1~6 时，把 #gcHome 换成 demo/gch/vN.css + vN.js 的版式并滚到这一块。
@@ -2527,7 +2527,7 @@
 (function () {
  var m = location.search.match(/[?&]gcv=([1-6])(?:&|$)/);
  if (!m) window.__gcDefault = 1;
-  var n = m ? m[1] : '6', l = document.createElement('link'), s = document.createElement('script'), q = m ? Date.now() : 'v=26110247';
+  var n = m ? m[1] : '6', l = document.createElement('link'), s = document.createElement('script'), q = m ? Date.now() : 'v=26110248';
  var dir = n === '4' || n === '6' ? 'js/gch/' : 'demo/gch/';   /* 11-03 上正式：定稿 V6（含它套的 V4）并进 js/gch/，其余效果稿仍在 demo/ */
  l.rel = 'stylesheet'; l.href = dir + 'v' + n + '.css?' + q;
  s.src = dir + 'v' + n + '.js?' + q;
@@ -2536,7 +2536,7 @@
  /* 11-02 品牌露出（用户定 4 处都要）：默认加载，?brand=0 可关掉对比；11-03 已并进 js/gch/ */
  if (!/[?&]brand=0/.test(location.search)) {
    var bl = document.createElement('link'), bs = document.createElement('script');
-    bl.rel = 'stylesheet'; bl.href = 'js/gch/brand.css?v=26110247'; bs.src = 'js/gch/brand.js?v=26110247';
+    bl.rel = 'stylesheet'; bl.href = 'js/gch/brand.css?v=26110248'; bs.src = 'js/gch/brand.js?v=26110248';
    document.head.appendChild(bl); document.body.appendChild(bs);
  }
 })();
--- a/js/app.js
+++ b/js/app.js
@@ -3,7 +3,7 @@
 (function () {
  'use strict';
  /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26110247';
+  var VER = '26110248';
  const $ = (s, c) => (c || document).querySelector(s);
  const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));

--- a/js/gch/v4.js
+++ b/js/gch/v4.js
@@ -188,5 +188,5 @@
 }
  /* feed.js 首页默认不加载（index.html 只引了 topics.js），这里按需拉一次 */
  if (window.GC_FEED) init();
-  else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110247'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
+  else { var fs = document.createElement('script'); fs.src = 'guangchang/feed.js?v=26110248'; fs.onload = fs.onerror = init; document.body.appendChild(fs); }
 })();
--- a/js/gch/v6.js
+++ b/js/gch/v6.js
@@ -6,9 +6,9 @@
 (function () {
  var sec = document.getElementById('gcHome');
  if (!sec) return;
-  var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'js/gch/v4.css?v=26110247';
+  var l = document.createElement('link'); l.rel = 'stylesheet'; l.href = 'js/gch/v4.css?v=26110248';
  document.head.appendChild(l);
-  var s = document.createElement('script'); s.src = 'js/gch/v4.js?v=26110247';
+  var s = document.createElement('script'); s.src = 'js/gch/v4.js?v=26110248';
  s.onload = function () { if (sec.querySelector('.g4-foot')) merge(); else sec.addEventListener('gc4-ready', merge, { once: true }); };   /* v4 要先拉 feed.js 才渲染 */
  document.body.appendChild(s);

--- a/topic/_shared/tools.js
+++ b/topic/_shared/tools.js
@@ -68,7 +68,7 @@
  function getJSON(u) { return fetch(u, { cache: 'no-cache' }).then(function (r) { if (!r.ok) throw r.status; return r.json(); }); }

  function related(box) {
-    getJSON('../_shared/idx.json?v=26110247').then(function (idx) {
+    getJSON('../_shared/idx.json?v=26110248').then(function (idx) {
      var me = null; idx.forEach(function (x) { if (x[0] === SLUG) me = x; });
      var tag = me ? me[2] : '', h = 0; for (var i = 0; i < SLUG.length; i++) h = (h * 31 + SLUG.charCodeAt(i)) >>> 0;
      var rest = idx.filter(function (x) { return x[0] !== SLUG; });
@@ -175,7 +175,7 @@
    }
    fetch(API + '/comments?kind=topic&target=' + encodeURIComponent(SLUG) + (OID ? '&openid=' + encodeURIComponent(OID) : ''))
      .then(function (r) { return r.json(); }).then(function (j) { if (j && j.code === 200) { RC = j.result; paint(); } }).catch(function () {});
-    getJSON('../_shared/cm/' + SLUG + '.json?v=26110247').then(function (d) { L = d.c || []; paint(); }).catch(function () { paint(); });
+    getJSON('../_shared/cm/' + SLUG + '.json?v=26110248').then(function (d) { L = d.c || []; paint(); }).catch(function () { paint(); });
  }

  function extras(el) {