抖音直播搜索结果怎么改网格布局

kyoyo123

想要在抖音搜索页面一次性预览更多的在线直播，而不是逐个滚动浏览。改进网页布局：默认搜索结果是竖向滚动的，希望能一次性看到更多直播画面，比如让它们以网格形式排列，而不是一列列向下滚动。AI给的油猴代码运行不成功。有其他的方式吗?

[HTML] 纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

// ==UserScript== // [url=home.php?mod=space&uid=170990]@name[/url]         抖音直播搜索页网格优化 // [url=home.php?mod=space&uid=467642]@namespace[/url]    http://tampermonkey.net/ // [url=home.php?mod=space&uid=1248337]@version[/url]      1.2 // @description  将抖音搜索页的直播项改为网格排列 // [url=home.php?mod=space&uid=686208]@AuThor[/url]       You // [url=home.php?mod=space&uid=195849]@match[/url]        *://www.douyin.com/search/* // [url=home.php?mod=space&uid=609072]@grant[/url]        none // ==/UserScript==   (function() {     'use strict';       function applyGridLayout() {         const container = document.querySelector('.pRkTX3zM'); // 可能的直播列表容器         if (!container) {             console.log('❌ 未找到直播列表容器，等待加载...');             setTimeout(applyGridLayout, 1000);             return;         }           console.log('✅ 找到直播列表容器，开始修改布局...');           // 设为网格布局         container.style.display = 'grid';         container.style.gridTemplateColumns = 'repeat(4, 1fr)'; // 4列布局         container.style.gap = '10px';           // 查找直播项         const liveItems = document.querySelectorAll('.IOdwC40M, .LIVE_ITEM_WRAPPER'); // 试试这两个选择器         if (liveItems.length === 0) {             console.log('⚠️ 未找到直播项，等待加载...');             setTimeout(applyGridLayout, 1000);             return;         }           liveItems.forEach(item => {             item.style.width = '100%';             item.style.height = 'auto';         });           console.log(`🎉 网格布局已成功应用，共 ${liveItems.length} 个直播项`);     }       // 监听 DOM 变化，确保直播列表加载后调整布局     const observer = new MutationObserver(() => {         applyGridLayout();     });       observer.observe(document.body, { childList: true, subtree: true });   })();